jspdf与html2canvas，div被剪切

Question

我正在尝试使用 html2canvas 使用 jspdf 创建/下载 pdf。我将某些 div 绕了一圈，并在里面涂上了一些值。当我在某些情况下下载 pdf 时，它会被剪切。并位于两个不同的页面中，部分如图所示。我希望div移动到其他页面而不是像这样剪切。

下载代码如下：

downloadPDF(): void {
const buttons = document.querySelectorAll('.button-content');
buttons.forEach((button) => {
  (button as HTMLElement).style.display = 'none';
});

const content = document.getElementById('pdf-content');
if (content) {
  html2canvas(content, { scale: 2, useCORS: true }).then((canvas) => {
    const imgWidth = 210;
    const pageHeight = 295;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    let heightLeft = imgHeight;

    const doc = new jsPDF('p', 'mm', 'a4');
    let position = 0;

    doc.addImage(
      canvas.toDataURL('image/png'),
      'PNG',
      0,
      position,
      imgWidth,
      imgHeight,
    );
    heightLeft -= pageHeight;

    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      doc.addPage();
      doc.addImage(
        canvas.toDataURL('image/png'),
        'PNG',
        0,
        position,
        imgWidth,
        imgHeight,
      );
      heightLeft -= pageHeight;
    }

    doc.save('Maturity Assessment Result Report.pdf');

    buttons.forEach((button) => {
      (button as HTMLElement).style.display = 'inline-block';
    });
  });
}

}

Answer 1

如果你想从html代码导出多页pdf，我推荐你使用html2pdf.js库，这个库将解决页面剪切的问题，并且上下页面的内容不会丢失.