HTML2CANVAS无法在大型HTML页面上正确呈现CSS

时间:2019-04-25 11:19:53

标签: jspdf html2canvas html2pdf

嗨,我在创建PDF时html2canvas遇到问题。我正在使用该库来创建pdf https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js

我已经研究了这个问题,很多人的回答是“检查它创建的画布是否在每个浏览器的限制范围内”,然后将您定向到此链接http://html2canvas.hertzen.com/faq/

我正在使用firefox创建pdf,这是我打印PDF 965ms html2canvas: Canvas renderer initialized (1391x19143 at 264.566650390625,5630) with scale 1时控制台返回的内容

我共享的链接提到Fiefox的限制为Maximum height/width: 32,767 pixels,我的PDF尚未达到该限制,但由于某种原因,该PDF无法呈现某些样式。

这是我用来打印PDF的代码:

var opt = {
    margin:       [70, 26],
    filename:     'pdf_summary.pdf',
    image:        { type: 'jpeg', quality: 1 },
    html2canvas:  { scale: 1 },
    jsPDF:        { unit: 'mm', format: ['420', '594'], orientation: 'p' }
};

html2pdf().from(content).set(opt).toPdf().get('pdf').then(function (pdfObject) {
    console.log(pdfObject);
    totalPages = pdfObject.internal.getNumberOfPages();
    for (var i = 1; i <= totalPages; i++) {
        pdfObject.setPage(i);
        pdfObject.setFontSize(15);
        pdfObject.setTextColor(150);
        pdfObject.text('Page ' + i + ' of ' + totalPages, 40, pdfObject.internal.pageSize.getHeight() - 20);
        pdfObject.text('Report generated on ' + moment().format("DD-MM-YYYY"), pdfObject.internal.pageSize.getWidth() - 117, pdfObject.internal.pageSize.getHeight() - 20);

        pdfObject.setFontSize(50);
        pdfObject.setTextColor('#ff5818');
        pdfObject.text('Intelli-Sense Analytics', pdfObject.internal.pageSize.getWidth() - 211, 50);

        pdfObject.setFontSize(20);
        pdfObject.setTextColor('#ff5818');
        pdfObject.text('Powered by GEO-Sense', pdfObject.internal.pageSize.getWidth() - 117, 60);
    }
}).save();

content包含我正在打印的HTML。

我正在将12页的内容打印为PDF,并希望在可能的情况下做更多的事情。前10页加载得很好,但是在第11页和第12页上,CSS似乎加载不正确。

示例

第10页上的CSS可以正常工作的表头图片。

working

第10页后的表格标题图片,其中CSS根本不起作用,但文本显示完美?

not working

上面的图像显示除表头(带圆圈)之外的所有内容都完全加载,由于某种原因,轮廓只是空白。只是要确认一个空盒子也是可以的,

我不确定这是否是CSS问题,因为文本使用的是我设置的某些CSS。我已经用PDF的其他元素对此进行了测试,我复制了在第10页之前使用的图形,并将它们放在第10页之后,它们也不会加载。

0 个答案:

没有答案
相关问题