jsPDF html method always fails

Question

I am trying to generate a PDF from an html element (a div) with some content:

<div id = "toPDF"> <table > <thead> <tr> <th>Destination</th> <th>Start Date</th> <th>End Date</th> <th>Comment</th> </tr> </thead> <tbody> <tr> <td>Dest1</td> <td>Date1</td> <td>Date2</td> <td>Comment1</td> </tr> </tbody> </table> </div> . . . <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script> <script src="app.js"></script>

I am using the following javascript:

window.html2canvas = html2canvas; var elem = document.getElementById('toPDF'); pdf.html(elem, { x: 20, y: 140, callback: function (pdf) { pdf.text(80, 230, "Test Text"); var iframe = document.createElement('iframe'); iframe.setAttribute('style', 'position:absolute;top:0;right:0;height:100%; width:600px'); document.body.appendChild(iframe); iframe.src = pdf.output('datauristring'); } });

The resulting PDF shows the "Test Text", but no trace of the html table. If I remove "Test Text" the output PDF is empty. The browser console shows the following error:

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap

I have tried different options. I am asking for a working jsPDF.html() example.

You don't need iframe. Here is a working example: stackoverflow.com/a/56415117/4271117 — Weihui Guo
– Weihui Guo, Commented Jun 4, 2019 at 18:37
@WeihuiGuo: I tried your code, but no difference. The new page opens and a document is shown, but it is completely blank. — Franco Tiveron
– Franco Tiveron, Commented Jun 6, 2019 at 4:28

Weihui Guo · Accepted Answer · 2019-06-07 01:22:35Z

The problem is most likely the version of html2canvas you used. html2canvas 0.4.1 is not going to work. It should be html2canvas 1.0.0-alpha.11 or higher. However, current version, html2canvas 1.0.0-rc.3 doesn't work either, it also gives me a blank page. At least html2canvas 1.0.0-alpha.12 still works for me.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script> <script src="~/lib/html2canvas/html2canvas.min.js"></script> <!-- html2canvas 1.0.0-alpha.11 or html2canvas 1.0.0-alpha.12 is needed --> <script> function download() { let pdf = new jsPDF('p', 'pt', 'a4'); pdf.html(document.getElementById('toPDF'), { callback: function () { window.open(pdf.output('bloburl')); } }); } </script>

Update: the latest version that works for me is html2canvas v1.0.0-rc.1

I tried the last release as per your advice, but unfortunately it doesn't make any difference. Still blank page and no errors.
No, you don’t get it. What I meant is do not use the last release. Read the answer carefully.
Thanks for the answer. My pdf gets generated, however, half of the content is off the page, it cuts some of the content in the resulted pdf. Are there options that it takes all the content?

Collectives™ on Stack Overflow

jsPDF html method always fails

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related