How to export the Html Tables data into PDF using Jspdf

Question

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    lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt           lt title gt html2canvas example lt  title gt           lt script type  text javascript  src  js jquery jquery-1 7 1 min js  gt  lt  script gt               lt script type  text javascript  src  js jspdf js  gt  lt  script gt               lt script type  text javascript  src  libs FileSaver js FileSaver js  gt  lt  script gt           lt script type  text javascript  src  js jspdf plugin standard fonts metrics js  gt  lt  script gt           lt script type  text javascript  src  js jspdf plugin split text to size js  gt  lt  script gt           lt script type  text javascript  src  js jspdf plugin from html js  gt  lt  script gt                lt script type  text javascript  gt                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                                                   lt  script gt       lt  head gt       lt body id  target  gt           lt div id  content  gt               lt h3 gt Hello  this is a H3 tag lt  h3 gt                lt a class  upload  gt Upload to Imgur lt  a gt                   lt h2 gt this is  lt b gt bold lt  b gt   lt span style  color red  gt red lt  span gt  lt  h2 gt                lt table border  1  gt                   lt tr gt                       lt th gt Header 1 lt  th gt                       lt th gt Header 2 lt  th gt                   lt  tr gt                   lt tr gt                       lt td gt row 1  cell 1 lt  td gt                       lt td gt row 1  cell 2 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt row 2  cell 1 lt  td gt                       lt td gt row 2  cell 2 lt  td gt                   lt  tr gt               lt  table gt           lt  div gt            lt button id  cmd  gt generate PDF lt  button gt       lt  body gt   lt  html gt    http   jsfiddle net y2b7Q 327

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Here is an example I think that will help you   lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  js min js  gt  lt  script gt   lt script src  js pdf js  gt  lt  script gt   lt script gt        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 lt 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 lt table rows length  i               var tableRow   table rows i           var rowData                for  var j 0  j lt tableRow cells length  j                   rowData  headers j      tableRow cells j  innerHTML                      data push rowData                     return data         lt  script gt   lt  head gt   lt body gt   lt div id  table  gt   lt table id  StudentInfoListTable  gt                   lt thead gt                       lt tr gt                               lt th gt Name lt  th gt                           lt th gt Email lt  th gt                           lt th gt Track lt  th gt                           lt th gt S S C Roll lt  th gt                           lt th gt S S C Division lt  th gt                           lt th gt H S C Roll lt  th gt                           lt th gt H S C Division lt  th gt                           lt th gt District lt  th gt                        lt  tr gt                   lt  thead gt                   lt tbody gt                            lt tr gt                               lt td gt alimon   lt  td gt                               lt td gt Email lt  td gt                               lt td gt 1 lt  td gt                               lt td gt 2222 lt  td gt                               lt td gt as lt  td gt                               lt td gt 3333 lt  td gt                               lt td gt dd lt  td gt                               lt td gt 33 lt  td gt                           lt  tr gt                                  lt  tbody gt               lt  table gt   lt button id  cmd  gt Submit lt  button gt   lt  body gt   lt  html gt    Here the output

User · Answer

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       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

User · Answer

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

User · Answer

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

User · Answer

Just follow these steps i can assure pdf file will be generated       lt html gt       lt head gt        lt title gt Exporting table data to pdf Example lt  title gt         lt script type  text javascript  src  https   code jquery com jquery-2 1 3 js  gt  lt  script gt       lt script type  text javascript  src  js jspdf js  gt  lt  script gt       lt script type  text javascript  src  js from html js  gt  lt  script gt       lt script type  text javascript  src  js split text to size js  gt  lt  script gt       lt script type  text javascript  src  js standard fonts metrics js  gt  lt  script gt       lt script type  text javascript  src  js cell js  gt  lt  script gt       lt script type  text javascript  src  js FileSaver js  gt  lt  script gt         lt script type  text javascript  gt            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                                     lt  script gt       lt  head gt       lt body gt       lt div id  yourTableIdName  gt           lt table style  width  1020px font-size  12px   border  1  gt               lt thead gt                   lt tr align  left  gt                       lt th gt Country lt  th gt                       lt th gt State lt  th gt                       lt th gt City lt  th gt                   lt  tr gt               lt  thead gt                 lt tbody gt                    lt tr align  left  gt                       lt td gt India lt  td gt                       lt td gt Telangana lt  td gt                       lt td gt Nirmal lt  td gt                   lt  tr gt   lt tr align  left  gt                       lt td gt India lt  td gt                       lt td gt Telangana lt  td gt                       lt td gt Nirmal lt  td gt                   lt  tr gt  lt tr align  left  gt                       lt td gt India lt  td gt                       lt td gt Telangana lt  td gt                       lt td gt Nirmal lt  td gt                   lt  tr gt  lt tr align  left  gt                       lt td gt India lt  td gt                       lt td gt Telangana lt  td gt                       lt td gt Nirmal lt  td gt                   lt  tr gt  lt tr align  left  gt                       lt td gt India lt  td gt                       lt td gt Telangana lt  td gt                       lt td gt Nirmal lt  td gt                   lt  tr gt  lt tr align  left  gt                       lt td gt India lt  td gt                       lt td gt Telangana lt  td gt                       lt td gt Nirmal lt  td gt                   lt  tr gt  lt tr align  left  gt                       lt td gt India lt  td gt                       lt td gt Telangana lt  td gt                       lt td gt Nirmal lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt  lt  div gt            lt input type  button  id  exportpdf  value  Download PDF  gt         lt  body gt        lt  html gt    Output   Html file output    Pdf file output

[jquery] How to export the Html Tables data into PDF using Jspdf

Examples related to jquery

Examples related to html

Examples related to jspdf