Блог

Я хочу сгенерировать PDF с помощью html2canvas и jsPDF .

Было подтверждено, что изображение было создано с использованием html2canvas chrome и 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();
}
 

Затем я сделал следующее, чтобы превратить изображение в 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');
}
 

Он отлично работает для Chrome, edge и Firefox. однако IE генерирует PDF с пустой страницей.

IE создает изображение, но создает пустую страницу PDF.

Устранено.

Я не загружался polyfills.*.js .

Когда я загружаюсь polyfills.*.js , он работает нормально.