how to use html2canvas and jspdf to export to pdf in a proper and simple way

Question

I am currently working on a school management software that usually requires exporting of html contents that contains data tables and div tag    I have tried all possible means to write a code that will be able to export my html data in a good way  with css preferably  After checking some question and answers here  I tried using spdf  but no luck    It keeps destroying my table alignment  then I read about html2canvas but to implement it with jspdf was my problem  i would like to capture the content if a div tag with html2canvas then send the canvas to jspdf to export the canvas as pdf    Here is my code below      lt script src  assets js pdfconvert jspdf js  gt  lt  script gt   lt script src  assets js pdfconvert jspdf plugin from html js  gt  lt  script gt   lt script src  assets js pdfconvert jspdf plugin split text to size js  gt  lt  script gt   lt script src  assets js pdfconvert jspdf plugin standard fonts metrics js  gt    lt  script gt   lt script src  assets js pdfconvert jspdf plugin addhtml js  gt  lt  script gt   lt script src  assets js pdfconvert filesaver js  gt  lt  script gt   lt script src  assets js pdfconvert jspdf plugin cell js  gt  lt  script gt   lt script src  assets js pdfconvert html2canvas js  gt  lt  script gt   lt script src  assets js pdfconvert jspdf plugin addimage js  gt  lt  script gt    here is the js code  var pdf   new jsPDF  p    pt    letter    pdf addHTML     ElementYouWantToConvertToPdf   0   function      pdf save  Test pdf

User · Answer

Changing this line   var doc   new jsPDF  L    px    w  h    var doc   new jsPDF  L    pt    w  h      To fix the dimensions

User · Answer

This one shows how to print only selected element on the page with dpi resolution adjustments  HTML    lt html gt      lt body gt       lt header gt This is the header lt  header gt       lt div id  content  gt        This is the element you only want to capture      lt  div gt       lt button id  print  gt Download Pdf lt  button gt       lt footer gt This is the footer lt  footer gt     lt  body gt    lt  html gt    CSS   body     background  beige     header     background  red     footer     background  blue      content     background  yellow    width  70     height  100px    margin  50px auto    border  1px solid orange    padding  20px      JS        print   click function        var w   document getElementById  content   offsetWidth    var h   document getElementById  content   offsetHeight    html2canvas document getElementById  content          dpi  300     Set to 300 DPI     scale  3     Adjusts your resolution     onrendered  function canvas          var img   canvas toDataURL  image jpeg   1         var doc   new jsPDF  L    px    w  h          doc addImage img   JPEG   0  0  w  h         doc save  sample-file pdf                      jsfiddle  https   jsfiddle net marksalvania dum8bfco

User · Answer

I have made a jsfiddle for you     lt canvas id  canvas  width  480  height  320  gt  lt  canvas gt          lt button id  download  gt Download Pdf lt  button gt               html2canvas     canvas                  onrendered  function canvas                             var imgData   canvas toDataURL                       image png                                  var doc   new jsPDF  p    mm                    doc addImage imgData   PNG   10  10                   doc save  sample-file pdf                                jsfiddle  http   jsfiddle net rpaul p4s5k59s 5   Tested  in Chrome38  IE11 and Firefox 33  Seems to have issues with Safari  However  Andrew got it working in Safari 8 on Mac OSx by switching to JPEG from PNG  For details  see his comment below

[javascript] how to use html2canvas and jspdf to export to pdf in a proper and simple way

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to jspdf