将HTML转换为canvas然后转换为Pdf

Question

我正在将HTML转换为画布，然后使用jspdf转换为pdf，即使是阿拉伯字体也能很好地工作，但是唯一的问题是，如果超出数据，它不会显示，因此如何分页显示新页面上的数据。

代码：

img.src = dataUrl
document.getElementById('printAll').style.visibility = 'visible'   
const input = document.getElementById('printAll');
html2canvas(input)
.then((canvas) => {
  const imgData = canvas.toDataURL('image/png');
  document.getElementById('printAll').style.visibility = 'hidden'
  const pdf = new jsPDF();
  pdf.addImage(this.state.img,'PNG',50,10,pdf.internal.pageSize.getWidth() - 100,pdf.internal.pageSize.getHeight() - 850);
  if (img.src)
  pdf.addImage(img.src, 'PNG', 80, 22, pdf.internal.pageSize.getWidth() - 100, pdf.internal.pageSize.getHeight() - 400);
  // pdf.rect(20, 20, pdf.internal.pageSize.getWidth() - 40, 
  pdf.internal.pageSize.getHeight() - 40, 'S');
  pdf.setTextColor(128,0,128);
  pdf.text("Date", 30, 25);
  pdf.text(this.state.date, 50, 25);
  pdf.addImage(imgData, 'PNG', 35, 90);
  pdf.text('end',30,290)
  pdf.save("download.pdf");  
});   

我的HTML是

<div id="printAll">
{this.state.Orders
   ?
    <Table hover bordered striped responsive size="sm" id="table">
      <tbody>
        {this.state.Orders.length
          ?   this.state.Orders.map((item,ind)=>{
                 return(
                    <tr>
                      <td>{item.key}</td>
                      <td>{item.value}</td>
                    </tr>
                 );
            })
          : null}
      </tbody>
     </Table>
   :
   <div>No data</div>
   }
</div>

我正在将A4页面的CSS用于媒体查询，但这也无济于事

#printAll {
    visibility: hidden;
    left: 20px;
    top: 50px;
    bottom: 0;
    overflow: auto;
    position: absolute;
    page-break-after: always;
}


/* avoid splitting element across pages */
#no-break {
    page-break-inside: avoid;
}

#break {
    page-break-before: always;
    page-break-after: always;
}

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
    .page-break {
        page-break-after: always;
        page-break-inside: avoid;
        clear: both;
    }

    #printAll {
        page-break-after: auto;
    }

    .page-break-before {
        page-break-before: always;
        page-break-inside: avoid;
        clear: both;
    }

    @page {
        margin: 3cm;
    }


    .noprint {
        display: none;
    }

    @page {
        size: 297mm 210mm;
        /* landscape */
        /* you can also specify margins here: */
        margin: 25mm;
        margin-right: 45mm;
        /* for compatibility with both A4 and Letter */
    }

    #table {
        width: 100% !important;
        text-align: center;
        margin-bottom: 5.5rem;
    }
}