我尝试使用jsPDF和html2canvs从一个HTML页面生成一个PDF。在项目的一个部分运行良好,PDF是根据需要生成的。另一个部分,虽然它太大,画布在文档底部得到削减。我曾试图实现一个多页面的解决方案,但是,图像仍然得到削减和数据没有显示。
我尝试的解决方案是这一个,但无济于事:
const data = document.getElementById('pdfPage_');
html2canvas(data).then((canvas:any) => {
const imgWidth = 208;
const pageHeight = 295;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = 0;
heightLeft -= pageHeight;
const doc = new jspdf('p', 'mm');
doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
heightLeft -= pageHeight;
}
doc.save('Downld.pdf');
});
作为参考,我使用Angular 6
PDF可读,所有元素均正确显示。
1条答案
按热度按时间8yoxcaq71#
这并不是一个完美的解决方案,因为页面看起来仍然是被裁剪的,但至少所有的数据在下一页上都是可见的。它包括在while循环中移除多余的像素: