The jsPDF html module generates a blank page

[hstevanoski]

The jsPDF module generates a blank page.
No matter if it's an element reference or an HTML string, I always get empty PDFs for some reason.

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
window.html2canvas = html2canvas;

var toPdfBtn = document.getElementById('pdf');

toPdfBtn.addEventListener('click', function() {
  var doc = new jsPDF();   

  doc.html(document.body, {
    callback: function (doc) {
      doc.save();
    }
  });
});

Note: The above code in the event listener handler is the same one from the documentation.

This doesn't seem to work either:

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
window.html2canvas = html2canvas;

var toPdfBtn = document.getElementById('pdf');

toPdfBtn.addEventListener('click', function() {
  var doc = new jsPDF();   

  doc.html('<h3>Test</h3>', {
    callback: function (doc) {
      doc.save();
    }
  });
});

I also tried importing html2canvas from a CDN and excluding it from this file (commenting out the 2nd and 3rd line), but that doesn't work either.
I also tried importing both html2canvas and jsPDF from a CDN and that doesn't seem to work as well.

I am using the following versions of the packages (excerpt from the packages.json file):

  "dependencies": {
    "html2canvas": "^1.0.0-rc.3",
    "jspdf": "^1.5.3"
  }

[Elecweb]

@hstevanoski

it has problem with html2canvas new version. For workaround look at this issue's comment.

#2487 (comment)

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[ninsau]

@hstevanoski

it has problem with html2canvas new version. For workaround look at this issue's comment.

#2487 (comment)

I'm still facing this issue. Did anyone solve it here? I'm using reactjs. Here is my code const printQr = () => { const input = document.getElementById("downl"); html2canvas(input).then((canvas) => { const imgData = canvas.toDataURL("image/svg"); const pdf = new jsPDF("landscape", "mm", "a4"); pdf.addImage(imgData, "svg", 10, 10, 180, 0); pdf.autoPrint(); pdf.output("dataurlnewwindow"); }); };

what am i doing wrongly ?

[rubenx4p]

Same for me. I'm using it in Angular application.
"dependencies": {
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1"
}

[SACHIN5SOS]

Same for me. I'm using it in Angular application.
"dependencies": {
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1"
}

try downgrading to html2canvas to rc.1 version.

[rubenx4p]

Same for me. I'm using it in Angular application.
"dependencies": {
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1"
}

try downgrading to html2canvas to rc.1 version.

sorry I forgot to mention that it work great on Chrome, blank page happens only in Safari

[huylethanh]

Chrome, bla

Yeah, I got the same issue. edge works well, but other browsers show blank pdf.

[huylethanh]

Same for me. I'm using it in Angular application.
"dependencies": {
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1"
}

try downgrading to html2canvas to rc.1 version.

sorry I forgot to mention that it work great on Chrome, blank page happens only in Safari

I got the same issue, because my chrome has grammarly extension.

[BlueClouDragon]

just uninstall html2canvas and install html2canvas@1.0.0-rc.1
this will solve empty pages and strange spacing between text

[wolfscott]

This is a little late to the party, but FOR ME, adding an extra 30 px to the internal.pageSize.height removed the extra page. I tried progressively lower values, and it worked lower until it didn't. I was trying different values based on the margin and all, but finally just added 30 and called it a day, which seemed to be ok.

This does add a little margin at the bottom and for some, this may make this option a non-starter.

Again, this worked for me so I'm passing this along. I should also point out, I'm only generating a single page. I have not tried this with a multi-page render - that result would be interesting to know.