jspdf/ html2canvas： - 底部的页面内容在多个页面上剪切

Question

以下是我的代码，其中HTML内容（输入）下载到PDF中，

我有一个页面，其中HTML控件存在，并且我正在尝试在按钮单击上下载相同的HTML文件。页面下载，但有些内容将在页面底部切断，同时将HTML转换为PDF。我已经使用JSPDF和HTML2Canvas进行了此实现。

const input = document.getElementById('print');
  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'pt',
    format: 'a4',
    compress:true,
  });

  //check for Screen dimensions
  let srcwidth = document.getElementById('print').scrollWidth;

  pdf
    .html(input, {
      margin: [55, 0, 40, -2],
      autoPaging: 'text',
      html2canvas: {
        scale: 595.26 / srcwidth, //595.26 is the width of A4 page
        scrollY: 0,
      },
    })
    .then(() => {
      const pageCount = pdf.internal.getNumberOfPages();
      const pageWidth = pdf.internal.pageSize.getWidth();
      var pageHeight = pdf.internal.pageSize.getHeight();

      //loop to set header/ footer, style, alignment, text style to the page
      for (let i = 1; i <= pageCount; i++) {
        pdf.rect(
          5,
          5,
          pdf.internal.pageSize.width - 13,
          pdf.internal.pageSize.height - 13,
          'S',
        );
        pdf.setPage(i);
        pdf.viewerPreferences({"FitWindow":true,"ViewArea":"MediaBox","ViewClip":"MediaBox" });
        var header = 'CSMM 5A - Vessel Cyber Security Self Assessment';
        var headerLine =
          '_________________________________________________________________________________';
        const footer = `Page ${i} of ${pageCount}`;
        var submitedDate =
          'Date Last Edited: ' +
          this.formatDateTime(this.state.vesselAssesementData.editedOn);

        // if (i > 1) {
        pdf
          .setFont('sans-serif', '', 'bold')
          .setFontSize(14)
          .text(header, 20, 25, { baseline: 'top' });
        pdf.addImage(kline, 'PNG', 530, 12, 35, 35);
        pdf.text(headerLine, 10, 38, { baseline: 'top' });
        // }

        pdf
          .setFont('Arial, sans-serif', '', 'normal')
          .setFontSize(9)
          .text(
            submitedDate,
            pageWidth / 6.5 - pdf.getTextWidth(submitedDate) / 2,
            pageHeight - 18,
            { baseline: 'bottom' },
          );

        pdf
          .setFont('Arial, sans-serif', '', 'normal')
          .setFontSize(9)
          .text(
            footer,
            pageWidth / 1.08 - pdf.getTextWidth(footer) / 2,
            pageHeight - 18,

            { baseline: 'bottom|right' },
          );
      }
      pdf.save(
        `${
          'VesselCyberSecuritySelfAssessmentReport_' +
          this.state.vesselAssesementData.uniqueId
        }.pdf`,
      );

以下是在问题发生的地方附加图像。

这是多个页面，在发生内容对齐问题的情况下创建的是多个页面

at ausap的解决方案 ASAP的解决方案将非常非常适合有帮助。