Javascript 使用jsPDF和html2canvas的动态高度

在我的react web应用程序中，用户可以提交表单并显示结果

要显示我的结果，我正在使用

材质表

。更具体地说，我使用的是这里的详图组件：

因此，当用户搜索时，有时有5个结果，有时有200个结果，并且能够打开面板获取每个结果的更多信息，高度可能会有很大差异

我试图做的是允许用户打印他们的搜索结果。我使用的是

jsPDF

和

html2canvas

以下是我目前的问题：

• 如果我的搜索结果div（#printThis）短于一整页，那么出于某种原因，它几乎会将图像集中在PDF上，而不是始终从顶部开始
• 无论我的搜索结果div有多长，它在第二页上的显示永远不会超过20%。比如说search results div（#printThis）有一个包含180个结果的表，它应该是5-6页的PDF格式，但它总是会创建最多2页，第二页只有大约20%的数据。因此，

  addImage

  似乎没有抓取整个图像

因此，我试图实现的是能够打印一份包含我所有结果的PDF。宽度将始终相同，但高度将始终是动态的，并且一次将有多个页面

我也用这个作为参考，但现在我被卡住了：

这是我的密码：

let input = document.getElementById('printThis');

html2canvas(input)
.then((canvas) => {
    var imgData = canvas.toDataURL('image/png');
    var pdf = new jsPDF();
    var imgProps= pdf.getImageProperties(imgData);
    var pdfWidth = pdf.internal.pageSize.getWidth();
    var pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    var heightLeft = pdfHeight;
    var position = 10; // give some top padding to first page

    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    heightLeft -= pdfHeight;

    //Create additional pagess if needed
    while (heightLeft >= 0) {
        position += heightLeft - pdfHeight; // top padding for other pages
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
        heightLeft -= pdfHeight;
    }           

    pdf.save('download.pdf');
}).catch(
    e=>console.log('error', e) 
);