嗨,我在创建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可以正常工作的表头图片。
第10页后的表格标题图片,其中CSS根本不起作用,但文本显示完美?
上面的图像显示除表头(带圆圈)之外的所有内容都完全加载,由于某种原因,轮廓只是空白。只是要确认一个空盒子也是可以的,
我不确定这是否是CSS问题,因为文本使用的是我设置的某些CSS。我已经用PDF的其他元素对此进行了测试,我复制了在第10页之前使用的图形,并将它们放在第10页之后,它们也不会加载。