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

• 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

1 Answer 1

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.