I want to generate PDF using html2canvas
and jsPDF
.
It was confirmed that the image was created using html2canvas
in chrome and IE11.
html2canvas($(element).get(0), {
useCORS: true,
allowTaint: true,
logging: true,
width: 930,
imageTimeout: 0,
scrollX: 0,
scrollY: -window.pageYOffset
}).then(function(canvas) {
var imgData = canvas.toDataURL("image/png", 1.0);
var img = '<img src="' + imgData + '" />'
var tab = window.open();
tab.document.open();
tab.document.write(img);
tab.document.close();
}
Then I did the following to make the image into a PDF
html2canvas($(element).get(0), {
useCORS: true,
allowTaint: true,
logging: true,
width: 930,
imageTimeout: 0,
scrollX: 0,
scrollY: -window.pageYOffset
}).then(function(canvas) {
var imgData = canvas.toDataURL("image/png", 1.0);
var imgWidth = 210;
var pageHeight = imgWidth * 1.414;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 20) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save('sample.pdf');
}
It works fine for chrome, edge, and firefox. however, IE generates a PDF of a blank page.
IE creates the image, but it creates a blank page PDF.
Resolved.
I did not load polyfills.*.js
.
When I load polyfills.*.js
, it works fine.