Question

What's the best way to print tables in PDF with JavaScript?

For example, I have the next code, and if you click on "Show PDF", the table appears in PDF in a new window. Is it possible to implement this with the jsPDF library?

<body>
    <table>
        <tr>
            <th>example</th>
            <th>example2</th>
        </tr>
        <tr>
            <td>value1</td>
            <td>value2</td>
        </tr>
    </table>
    <br>
    <input type="button" value="Show PDF">
</body>
Was it helpful?

Solution 5

You should to use DOMPDF, :
dompdf is an HTML to PDF converter. At its heart, dompdf is (mostly) CSS 2.1 compliant HTML layout and rendering engine written in PHP. It is a style-driven renderer: it will download and read external stylesheets, inline style tags, and the style attributes of individual HTML elements. It also supports most presentational HTML attributes.

Download domPDF

http://code.google.com/p/dompdf/

<?
require  "dompdf_config.inc.php";
$html = <<<STY
<table>
<tr>
<th>example</th>
<th>example2</th>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
</table>
</body>
STY;
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();    
$dompdf->stream("mypdf.pdf", array("Attachment" => 0));
?>

OTHER TIPS

Bytescout has new javascript product "PDF Generator SDK for Javascript" which is capable of generating PDF files 100% on client side, probably you may generate PDF with text, images, graphics. Full HTML formatting is not supported, but you can use , , html tags inside text to use rich formatting (new version will include support for and html tags inside text)

Demo of invoice with logo and table generated: http://bytescout.com/products/developer/pdfgeneratorsdkjs/create_pdf_invoice_javascript.html

I had the same problem, This is the way that i solved it.

//inputs starts here

var T_X =20 //Starting X of Table
var T_Y =25 //Starting Y of Table
var T_W =170 //Width of Table
var T_H =10 //Height of each cell
var Px  =7 // Scale of width in each columns
var Fs  =17 //Font size
var Tp  =7 //Y of all cells text, must change with `Fs`

var c = new Array() //Input Each Row by Adding new c[i]
c[0] = new Array("1","2","3","4","5","6","7");
c[1] = new Array("a","b","c","d","e","f","g");
c[2] = new Array("A","B","C","D","E","F","G");
//c[3] = new Array("Alpha","Beta","Gamma","Delta","Epsilon","Zeta","Eta");

//inputs ends here
//From This Part to bottom, there is no more inputs, no need to read them.

//i found this function here "http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript"
String.prototype.width = function() {
  var f = Px+'px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}


var doc = new jsPDF();
doc.text(85, 15, "Table example");

doc.setDrawColor(50,215,50);
doc.setLineWidth(0.5);

var i
var rows = c[0].length
var cols = c.length
var max = new Array()

for(i=0;i<cols;i++)
    max[i]=0

doc.setFontSize(Fs);

for(i=0;i<rows;i+=1)
{
    doc.line(T_X, T_Y+T_H*i,T_W + T_X, T_Y+T_H*i);

    for(var j=0;j<cols;j+=1)
        if(c[j][i].width()>max[j])
            max[j]=c[j][i].width(); 

}
    doc.line(T_X, T_Y+T_H*rows,T_W + T_X, T_Y+T_H*i);

var m = 0
for(i=0;i<cols;i+=1)
{
    for(var j=0;j<rows;j+=1)
        doc.text(T_X + 0.5 + m, Tp+T_Y+T_H*j,c[i][j]);
    doc.line(T_X + m, T_Y ,T_X + m, T_Y + rows * T_H);

    m += max[i];   
}
doc.line(T_X + T_W, T_Y ,T_X + T_W, T_Y + rows * T_H);

Hope it helps, However it is late!

Try witch TCPDF
TCPDF is a PHP class for generating PDF files on-the-fly without requiring external extensions. This library includes also a class to extract data from existing PDF documents and classes to generate 1D and 2D barcodes in various formats.

The AutoTable plugin for jsPDF automates a lot of the tasks required to make tables or lists. The only thing required for your example is first converting the table to json and then passing it to the autoTable() method. Check out the demos or repo for more advanced examples.

function generatePdf() {
    var doc = new jsPDF('p', 'pt');
    var json = doc.autoTableHtmlToJson(document.getElementById("table"));
    doc.autoTable(false, json);
    doc.save('table.pdf');
}

function generatePdf() {
   var doc = new jsPDF('p', 'pt');
   var json = doc.autoTableHtmlToJson(document.getElementById("table"));
   doc.autoTable(false, json);
   doc.save('table.pdf');
}
<table id="table">
  <tr>
    <th>example</th>
    <th>example2</th>
  </tr>
  <tr>
    <td>value1</td>
    <td>value2</td>
  </tr>
</table>
<br>
<input type="button" onclick="generatePdf()" value="Show PDF">

<script src="https://rawgit.com/MrRio/jsPDF/master/dist/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/jspdf.plugin.autotable.js"></script>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top