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:

<script type="text/javascript" src="js/jspdf.min.js"></script> 

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.

Answer 1

you can use pdf from html as follows,

Step 1: Add the following script to the header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> 

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.

 <script>     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         );     } </script> 

Step 3: Add your body content

<a href="javascript:demoFromHTML()" class="button">Run Code</a> <div id="content">     <h1>           We support special element handlers. Register them with jQuery-style.     </h1> </div> 

Refer to the original tutorial

See a working fiddle

Answer 2

You only need this link jspdf.min.js

It has everything in it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>