jsPDF: html2canvas not loaded while using new .html() method

Question

I want to use jsPDF.html to convert html page to pdf, and I'm using this code:

savePdf () {
  var pdf = new jsPDF({unit: 'mm', format: 'a4', orientation: 'portrait' })
  pdf.html(document.getElementById('printable-cv'), {
    callback: function (pdf) {
      pdf.save('cv-a4.pdf');
    }
  })
}

but I get error html2canvas not loaded: is it something I forgot? I do have html2canvas

"html2canvas": "^1.0.0-alpha.12"

I'm using vuejs with webpack.

In the same page I'm currently using alternatively html2pdf with the following code:

savePdf0 () {
  let opt = {
    filename: 'cv.pdf',
    enableLinks: true,
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: {
      scale: 8,
      useCORS: true,
      width: 310,
      letterRendering: true,
    },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
  }
  html2pdf().set(opt).from(document.getElementById('printable-cv')).save()
}

that correcly finds html2canvas.

What does html2canvas not loaded really mean? what can I do to load it?

I added a codesandbox that shows the problem: codesandbox.io/s/6vmqpwy0xr — Alessandro Dentella
– Alessandro Dentella, Commented Jan 11, 2019 at 12:56

ax_pernot · Accepted Answer · 2019-01-15 15:54:01Z

27

jsPDF needs html2canvas to be declared in the global scope to work, so you have to write

window.html2canvas = html2canvas;

somewhere before you call html().

That said, I wasn't able to make it work either, so I resorted to a wrapper that works around the issue by calling manually html2canvas() then giving the resulting canvas to jsPDF.

edited Jan 15, 2019 at 15:54

answered Jan 14, 2019 at 10:57

ax_pernot

3863 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Despertaweb Over a year ago

You made my week!!! :D Thanks wo/man! But now I can't set the right fit for the a4 size. It's either tiny or huge :( Any clue?

Amit Merin · Accepted Answer · 2019-01-29 20:54:30Z

5

Following the previous anser by ptidus, this should work:

saveAsPdf() {
  window.html2canvas = html2canvas;
  var doc = new jsPDF(
    'p', 'pt', 'a4'
  );
  doc.html(document.querySelector("body"), {
    callback: function(pdf) {
      pdf.save("cv-a4.pdf");
    }
  });
}

There is something off with the margins probably, but I didn't explore that too much. You will also notice that the generated PDF is actually text and not an image.

code example

answered Jan 29, 2019 at 20:54

Amit Merin

1,9662 gold badges12 silver badges6 bronze badges

1 Comment

leoncc Over a year ago

If using TypeScript it won't be happy with window.html2canvas so just do an ugly window["html2canvas"] = html2canvas.

mike · Accepted Answer · 2023-11-07 22:16:30Z

I had luck loading html2canvas separately:

The below example saves a .pdf (check downloads) containing "Hello World" rendered from a canvas.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <script type="text/javascript">
    window.onload = function () {
        //1). draw 
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "white"
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.font = "30px Arial";
        ctx.strokeText("Hello World", 10, 50);

        
        //2).save as pdf
               const doc = new jspdf.jsPDF({ unit: 'pt' }); 

            doc.html(document.body, {
                callback: (pdf) => {
                    pdf.save('MyPdfFile.pdf')
                }
            });
    };
    </script>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:3px solid red;">
    </canvas>
</body>
</html>

Martiuh · Accepted Answer · 2020-04-21 18:25:04Z

2

For all of you who are using webpack what I did is I added html2canvas to a ProvidePlugin. You can read about this here

// webpack configuration
plugins: [
    new webpack.ProvidePlugin({
        html2canvas: 'html2canvas'
    });
]

edited Apr 21, 2020 at 18:25

answered Apr 13, 2020 at 21:28

Martiuh

1949 bronze badges

1 Comment

André Kelling Over a year ago

that's working plus the as correct marked answer while i do use webpack

Phani Kanth · Accepted Answer · 2020-06-28 13:35:39Z

0

The following two had fixed the issue:

// webpack configuration plugins: [ new webpack.ProvidePlugin({ html2canvas: 'html2canvas' }); ]
window["html2canvas"] = html2canvas;

even with out the first step its working.

edited Jun 28, 2020 at 13:35

answered Jun 28, 2020 at 13:08

Phani Kanth

11 bronze badge

Collectives™ on Stack Overflow

jsPDF: html2canvas not loaded while using new .html() method

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related