生成多页pdf时，画布被剪切

Question

我正在尝试使用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可读，所有元素显示正常

Answer 1

这不是一个完美的解决方案，因为页面仍然会显示为裁剪，但至少所有数据将在下一页上可见。它包括在while循环中移除额外的像素:

const data = document.getElementById('pdfPage_');
const pageOffsetY = 24;
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 - pageOffsetY;
doc.addPage();
doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
heightLeft -= pageHeight;
}
doc.save('Downld.pdf');
});