jsPDF is not defined in javascript

user_1117987 0
Viewed 5592

I imported jsPDF library and tried to export to PDF but I am getting JavaScript error jsPDF is not defined.

I tried other similar posts and it didn't work for me.

I got the fiddle here https://jsfiddle.net/aybhvf8e/1/

<script type="text/javascript" src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

$( document ).ready(function() {

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};
})

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});


<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
jspdf javascript
3 Answers

I think your code seems correct but some issue with cdn. I have used debug one here.

Here is one working example I created which you can refer. If you don't see pdf downloading due to stackoverflow restriction, use this fiddle to test.

Working Download PDF demo

The cdn link I used is : JsPDF CDN LINK . You can definitely look for any other versions available.

function createPdf() {

  var doc = new jsPDF();
  
  source = $('#content')[0];
  
  specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true
        }
    };
  
  doc.fromHTML(
    source,
    15,
    15, 
    {
      'width': 170,
      'elementHandlers': specialElementHandlers
    }
  );
  doc.save('sample-file.pdf')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button onclick="javascript:createPdf()" id="cmd">generate PDF</button>

user_120620890

I found two main issues, solved in this fork. First, you did not link to jspdf. You can do that in the html code:

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

Second, you add the click event listener outside the ready() function. This, in turn, causes two problems: the event may not be attached (make sure you check the reason for the ready() function) and the variables that you define in the ready() function are not available (get out of scope) in the click function. You can fix both problems by setting the click listener inside the ready listener:

$( document ).ready(function() {

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};
$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

})
user_95651390

VQR ..... one question, my app works some times on places without network, so the next line won't be work without network , correct?

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

So, I installed it ...

npm install jspdf --save

But now, what files have I to copy to my Js carpet to works the line ?

var doc = new jsPDF();
user_32854570
Related