Search code examples
javascriptjspdf

jsPDF not working properly in IE11 browser


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.


Solution

  • Resolved.

    I did not load polyfills.*.js.

    When I load polyfills.*.js, it works fine.