javascript - jsPDF is not defined when saving div to PDF - Stack Overflow

admin管理员组

文章数量:1341431

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=".3.1/jquery.min.js"></script>
<script src="@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>

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg./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?

• javascript
• jquery
• pdf-generation
• jspdf
• referenceerror

Share Improve this question Follow edited Aug 11, 2020 at 17:52 basilique asked Aug 11, 2020 at 16:58 basiliquebasilique 30333 silver badges99 bronze badges 2

• It might help to build a working example here, ideally using a stack snippet. That might give us a better idea of what's going wrong. – showdev Commented Aug 11, 2020 at 17:35
• @showdev thanks for suggestion, just updated the question with the snippet and it gives the same error. – basilique Commented Aug 11, 2020 at 17:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Use the previous version
<script src="https://cdnjs.cloudflare./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.

本文标签： javascriptjsPDF is not defined when saving div to PDFStack Overflow