Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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 id="editor"></div>
<button id="cmd">generate PDF</button>

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,
      '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 id="editor"></div>
<button onclick="javascript:createPdf()" id="cmd">generate PDF</button>

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');

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(); 
        

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.