Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jsPDF is not defined when saving div to PDF

I'm trying to save div element with specific id using jsPDF but getting Uncaught ReferenceError: jsPDF is not defined. Tried bunch of different ways to fix this issue including all available solutions on stackoverflow and none of them worked.

Here is how the div element looks like (it's a table that autofills depending on user choices, I removed most of options to reduce number of lines for this example). Below is a quick snippet to give an idea what's going on. It still says that jsPDF not deifned:

$('#savePDF').click(function() {
  var pdf = new jsPDF('p', 'pt', 'letter');
        source = $('#yourSummary');
        specialElementHandlers = {
            '#bypassme': function (element, renderer) {
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        pdf.fromHTML(
            source,
            margins.left,
            margins.top, {
                'width': margins.width,
                'elementHandlers': specialElementHandlers
            },

            function (dispose) {
                pdf.save('your-summary.pdf');
            }, margins
        );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<div id="yourSummary" class="modal-body">
  <table id="yourExterior" class="table table-hover">
  <h5>Exterior</h5>
    <tbody>
     <tr>
      <th scope="row">Body colour</th>
      <td id="sumBC"></td>
     </tr>
    </tbody>
  </table>
</div>
<button class="btn-primary" id="savePDF">Save configuration as PDF</button>

But once I push the button in browser I have following errors:

Uncaught ReferenceError: jsPDF is not defined
at HTMLButtonElement.<anonymous> (main.js:34)
at HTMLButtonElement.dispatch (jquery-3.5.1.slim.min.js:2)
at HTMLButtonElement.v.handle (jquery-3.5.1.slim.min.js:2)

What am I doing wrong and how to fix this issue?

like image 430
basilique Avatar asked Aug 11 '20 16:08

basilique


1 Answers

Use the previous version
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

The version 2.0.0 is very different.
For an example, instead of the method "jsPDF" you will use jspdf.jsPDF, but you will see new errors.

like image 192
Tatul Mkrtchyan Avatar answered Oct 29 '22 14:10

Tatul Mkrtchyan