How to export the Html Tables data into PDF using Jspdf

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.

   html2canvas example          
Hello, this is a H3 tag
 Upload to Imgur 
this is bold red
 
 
Header 1 Header 2 
 
row 1, cell 1 row 1, cell 2 
 
row 2, cell 1 row 2, cell 2
5,214 4 4 gold badges 27 27 silver badges 41 41 bronze badges asked Nov 6, 2013 at 9:09 1,680 11 11 gold badges 33 33 silver badges 59 59 bronze badges

8 Answers 8

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

answered Oct 26, 2015 at 19:15 Oscar Acevedo Oscar Acevedo 1,172 1 1 gold badge 13 13 silver badges 20 20 bronze badges

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.

1,015 2 2 gold badges 15 15 silver badges 21 21 bronze badges answered Jul 28, 2014 at 15:36 Nelli.Prashanth kumar Nelli.Prashanth kumar 61 1 1 silver badge 4 4 bronze badges

Here is an example I think that will help you

         
  
Name Email Track S.S.C Roll S.S.C Division H.S.C Roll H.S.C Division District 
   
alimon Email 1 2222 as 3333 dd 33

Here the output

enter image description here

answered Jan 23, 2014 at 8:17 Alimon Karim Alimon Karim 4,459 10 10 gold badges 45 45 silver badges 69 69 bronze badges

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

77 8 8 bronze badges answered Dec 19, 2013 at 15:14 151 3 3 bronze badges

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.

Commented Dec 4, 2014 at 15:07

"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()
1 1 1 silver badge answered Dec 26, 2013 at 14:53 440 2 2 silver badges 13 13 bronze badges

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

   Exporting table data to pdf Example           
 
  
Country State City 
   
India Telangana Nirmal 
 
India Telangana Nirmal 
 
India Telangana Nirmal 
 
India Telangana Nirmal 
 
India Telangana Nirmal 
 
India Telangana Nirmal 
 
India Telangana Nirmal

html output

Html file output:

pdf output

Pdf file output: