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: https://stackoverflow.com/a/56415117/4271117 — Weihui Guo, Jun 04 '19 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, Jun 06 '19 at 04:28

Weihui Guo · Accepted Answer · 2019-06-07T01:22:35.233

1

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

edited Jun 07 '19 at 01:22

answered Jun 06 '19 at 16:22

Weihui Guo

3,669
5
34
56

I tried the last release as per your advice, but unfortunately it doesn't make any difference. Still blank page and no errors. – Franco Tiveron Jun 06 '19 at 21:38
No, you don’t get it. What I meant is do not use the last release. Read the answer carefully. – Weihui Guo Jun 06 '19 at 22:22
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? – Efron A. Sep 14 '19 at 01:39
1

@EfronA. You can try to use [the scale in html2canvas](https://stackoverflow.com/a/54847643/4271117) – Weihui Guo Sep 14 '19 at 03:12

jsPDF html method always fails

1 Answers1

Linked