How to properly use jsPDF library

Question

I want to convert some of my divs into PDF and I ve tried jsPDF library but with no success  It seems I can t understand what I need to import to make the library work  I ve been through the examples and I still can t figure it out  I ve tried the following    lt script type  text javascript  src  js jspdf min js  gt  lt  script gt    After jQuery and       html2pdf   on  click   function        var doc   new jsPDF        doc fromHTML    body   get 0   15  15             width   170             console log doc         for testing purposes but I receive    Cannot read property   smdadminbar  of undefined    where  smdadminbar is the first div from the body

User · Answer

how about in vuejs how is it applicable     x000D   x000D  function onClick     x000D    var pdf   new jsPDF  p    pt    letter    x000D    pdf canvas height   72   11  x000D    pdf canvas width   72   8 5  x000D   x000D    pdf fromHTML document body   x000D   x000D    pdf save  test pdf    x000D     x000D   x000D  var element   document getElementById  clickbind    x000D  element addEventListener  click   onClick   x000D   lt h1 gt Dsdas lt  h1 gt  x000D   x000D   lt a id  clickbind  href     gt Click lt  a gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jspdf 1 3 3 jspdf min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

You only need this link jspdf min js  It has everything in it     lt script src  https   cdnjs cloudflare com ajax libs jspdf 1 3 2 jspdf min js  gt  lt  script gt

User · Answer

Shouldn t you also be using the jspdf plugin from html js library  Besides the main library  jspdf js   you must use other libraries for  special operations   like jspdf plugin addimage js for using images   Check https   github com MrRio jsPDF

User · Answer

This is finally what did it for me  and triggers a disposition     x000D   x000D  function onClick     x000D    var pdf   new jsPDF  p    pt    letter    x000D    pdf canvas height   72   11  x000D    pdf canvas width   72   8 5  x000D   x000D    pdf fromHTML document body   x000D   x000D    pdf save  test pdf    x000D     x000D   x000D  var element   document getElementById  clickbind    x000D  element addEventListener  click   onClick   x000D   lt h1 gt Dsdas lt  h1 gt  x000D   x000D   lt a id  clickbind  href     gt Click lt  a gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jspdf 1 3 3 jspdf min js  gt  lt  script gt  x000D   x000D   x000D       And for those of the KnockoutJS inclination  a little binding    ko bindingHandlers generatePDF         init  function element             function onClick                 var pdf   new jsPDF  p    pt    letter                pdf canvas height   72   11              pdf canvas width   72   8 5               pdf fromHTML document body                pdf save  test pdf                                            element addEventListener  click   onClick

User · Answer

first  you have to create a handler   var specialElementHandlers           editor   function element  renderer           return true             then write this code in click event   doc fromHTML    body   get 0   15  15         width   170        elementHandlers   specialElementHandlers              var pdfOutput   doc output                console log   gt  gt  gt   pdfOutput      assuming you ve already declared doc variable  And Then you have save this pdf file using File-Plugin

User · Answer

you can use pdf from html as follows   Step 1  Add the following script to the header   lt script src  https   cdnjs cloudflare com ajax libs jspdf 1 3 2 jspdf min js  gt  lt  script gt    or download locally  Step 2  Add HTML script to execute jsPDF code  Customize this to pass the identifier or just change  content to be the identifier you need     lt script gt      function demoFromHTML             var pdf   new jsPDF  p    pt    letter               source can be HTML-formatted string  or a reference            to an actual DOM element from which the text will be scraped          source       content   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  40              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  Test pdf                   margins                   lt  script gt    Step 3  Add your body content   lt a href  javascript demoFromHTML    class  button  gt Run Code lt  a gt   lt div id  content  gt       lt h1 gt            We support special element handlers  Register them with jQuery-style       lt  h1 gt   lt  div gt    Refer to the original tutorial  See a working fiddle

User · Answer

According to the latest version  1 5 3  there is no fromHTML   method anymore  Instead you should utilize jsPDF HTML plugin  see  https   rawgit com MrRio jsPDF master docs module-html html  html  You also need to add html2canvas library in order for it to work properly  https   github com niklasvh html2canvas  JS  from API docs    var doc   new jsPDF        doc html document body       callback  function  doc         doc save               You can provide HTML string instead of reference to the DOM element as well

[javascript] How to properly use jsPDF library

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to jspdf