22

How do I export the tables in HTML page to PDF. I have done some sample data but I am unable to load the HTML table list into PDF, Please can any one help me in loading the Tables into PDF.

<!DOCTYPE html> <html lang="en"> <head> <title>html2canvas example</title> <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jspdf.js"></script> <script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script> <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script> <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script> <script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script> <script type="text/javascript"> $(document).ready(function() { var specialElementHandlers = { '#editor': function(element, renderer) { return true; } }; $('#cmd').click(function() { var doc = new jsPDF(); doc.fromHTML($('#target').html(), 15, 15, { 'width': 170,'elementHandlers': specialElementHandlers }); doc.save('sample-file.pdf'); }); }); </script> </head> <body id="target"> <div id="content"> <h3>Hello, this is a H3 tag</h3> <a class="upload">Upload to Imgur</a> <h2>this is <b>bold</b> <span style="color:red">red</span></h2> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </div> <button id="cmd">generate PDF</button> </body> </html>

http://jsfiddle.net/y2b7Q/327/

Improve this question

8 Answers 8

Reset to default
15

A good option is AutoTable(a Table plugin for jsPDF), it includes themes, rowspan, colspan, extract data from html, works with json, you can also personalize your headers and make them horizontals. Here is a demo.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

7

There is a tablePlugin for jspdf it expects array of objects and displays that data as a table. You can style the text and headers with little changes in the code. It is open source and also has examples for you to get started with.

Improve this answer

Comments

6

Here is an example I think that will help you

<!DOCTYPE html> <html> <head> <script src="js/min.js"></script> <script src="js/pdf.js"></script> <script> $(function(){ var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; $('#cmd').click(function () { var table = tableToJson($('#StudentInfoListTable').get(0)) var doc = new jsPDF('p','pt', 'a4', true); doc.cellInitialize(); $.each(table, function (i, row){ console.debug(row); $.each(row, function (j, cell){ doc.cell(10, 50,120, 50, cell, i); // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height }) }) doc.save('sample-file.pdf'); }); function tableToJson(table) { var data = []; // first row needs to be headers var headers = []; for (var i=0; i<table.rows[0].cells.length; i++) { headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,''); } // go through cells for (var i=0; i<table.rows.length; i++) { var tableRow = table.rows[i]; var rowData = {}; for (var j=0; j<tableRow.cells.length; j++) { rowData[ headers[j] ] = tableRow.cells[j].innerHTML; } data.push(rowData); } return data; } }); </script> </head> <body> <div id="table"> <table id="StudentInfoListTable"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Track</th> <th>S.S.C Roll</th> <th>S.S.C Division</th> <th>H.S.C Roll</th> <th>H.S.C Division</th> <th>District</th> </tr> </thead> <tbody> <tr> <td>alimon </td> <td>Email</td> <td>1</td> <td>2222</td> <td>as</td> <td>3333</td> <td>dd</td> <td>33</td> </tr> </tbody> </table> <button id="cmd">Submit</button> </body> </html>

Here the output

enter image description here

Improve this answer

Comments

6

Unfortunately it is not possible to do it.

jsPDF does not support exporting images and tables in fromHTML method. in jsPDF v0.9.0 rc2

Improve this answer

1 Comment

Yes, the answer is 'true', but it is not correct to answer this question. OP is asking for help to export to pdf, and has shown an attempt.
3

"How to properly use jsPDF library" might give you a little more of what you need. The table won't render correctly (no css, per this answer), but you could do some parsing of the html table with jquery and manually style it yourself.

Another option would be to use screenshots of the HTML with HTML2Canvas or Casper.js.

EDIT

Here's a basic example using the jspdf cell plugin. It uses jquery and the tableToJson() function from HTML Table to JSON.

Be sure to include the Deflate lib (two js files) and jspdf.plugin.cell.js.

var table = tableToJson($('#table-id').get(0)) var doc = new jsPDF('p', 'pt', 'a4', true); doc.cellInitialize(); $.each(table, function (i, row){ $.each(row, function (j, cell){ doc.cell(10, 200, 100, 20, cell, i); }) }) doc.save()
Improve this answer

Comments

3

Just follow these steps i can assure pdf file will be generated

 <html> <head> <title>Exporting table data to pdf Example</title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> <script type="text/javascript" src="js/jspdf.js"></script> <script type="text/javascript" src="js/from_html.js"></script> <script type="text/javascript" src="js/split_text_to_size.js"></script> <script type="text/javascript" src="js/standard_fonts_metrics.js"></script> <script type="text/javascript" src="js/cell.js"></script> <script type="text/javascript" src="js/FileSaver.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#exportpdf").click(function() { var pdf = new jsPDF('p', 'pt', 'ledger'); // source can be HTML-formatted string, or a reference // to an actual DOM element from which the text will be scraped. source = $('#yourTableIdName')[0]; // we support special element handlers. Register them with jQuery-style // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) // There is no support for any other type of selectors // (class, of compound) at this time. specialElementHandlers = { // element with id of "bypass" - jQuery style selector '#bypassme' : function(element, renderer) { // true = "handled elsewhere, bypass text extraction" return true } }; margins = { top : 80, bottom : 60, left : 60, width : 522 }; // all coords and widths are in jsPDF instance's declared units // 'inches' in this case pdf.fromHTML(source, // HTML string or DOM elem ref. margins.left, // x coord margins.top, { // y coord 'width' : margins.width, // max width of content on PDF 'elementHandlers' : specialElementHandlers }, function(dispose) { // dispose: object with X, Y of the last line add to the PDF // this allow the insertion of new lines after html pdf.save('fileNameOfGeneretedPdf.pdf'); }, margins); }); }); </script> </head> <body> <div id="yourTableIdName"> <table style="width: 1020px;font-size: 12px;" border="1"> <thead> <tr align="left"> <th>Country</th> <th>State</th> <th>City</th> </tr> </thead> <tbody> <tr align="left"> <td>India</td> <td>Telangana</td> <td>Nirmal</td> </tr> <tr align="left"> <td>India</td> <td>Telangana</td> <td>Nirmal</td> </tr><tr align="left"> <td>India</td> <td>Telangana</td> <td>Nirmal</td> </tr><tr align="left"> <td>India</td> <td>Telangana</td> <td>Nirmal</td> </tr><tr align="left"> <td>India</td> <td>Telangana</td> <td>Nirmal</td> </tr><tr align="left"> <td>India</td> <td>Telangana</td> <td>Nirmal</td> </tr><tr align="left"> <td>India</td> <td>Telangana</td> <td>Nirmal</td> </tr> </tbody> </table></div> <input type="button" id="exportpdf" value="Download PDF"> </body> </html>

Output:

Html file output: html output

Pdf file output: pdf output

Improve this answer

Comments

2

Try to put 

doc.fromHTML($('#target').get(0), 15, 15, { 'width': 170,'elementHandlers': specialElementHandlers });

instead of

doc.fromHTML($('#target').html(), 15, 15, { 'width': 170,'elementHandlers': specialElementHandlers });
Improve this answer

Comments

0

I Used Datatable JS plugin for my purpose of exporting an html table data into various formats. With my experience it was very quick, easy to use and configure with minimal coding.

Below is a sample jquery call using datatable plugin, #example is your table id

$(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ] } ); } );

Please find the complete example in below datatable reference link :

https://datatables.net/extensions/buttons/examples/html5/simple.html

This is how it looks after configuration( from reference site) : enter image description here

You need to have following library references in your html ( some can be found in the above reference link)

jquery-1.12.3.js jquery.dataTables.min.js dataTables.buttons.min.js jszip.min.js pdfmake.min.js vfs_fonts.js buttons.html5.min.js
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.