React项目使用jspdf、react-to-pdf导出PDF结果不一致问题求助

我正在尝试在页面上实现报表导出功能，已尝试使用jspdf和react-to-pdf两款库，两者均存在导出不稳定的问题。这两款库都需要为目标div绑定ref，将对应区域先转换为图片再生成PDF，转换功能可正常触发，但连续点击10次导出按钮，会得到10份样式均不相同的PDF文件。

react-to-pdf库实现代码 #

<Pdf targetRef={this.ref} filename="reacToPdf.pdf" scale={0.7}>
     {({ toPdf }) => <Button color='grey' onClick={toPdf}>Export PDF</Button>}
</Pdf>

jspdf库实现代码 #

<Button color='grey' onClick={() => {
     const div = document.getElementById('exportPdfDiv')
     html2canvas(div)
        .then((canvas)=> {
             const imgData = canvas.toDataURL('image/png');
             const pdf = new jsPDF('p', 'pt');
             pdf.addImage(imgData, 'PNG', 0, 0, 0, 0, undefined, false);
             pdf.save("jspdf.pdf");
             })
        }
    }>Export PDF 2</Button>

问题表现 #

• 未修改任何代码的前提下，两款库每次导出的PDF内容位置都存在差异
• 多次导出的结果无固定规律，没有两次导出的PDF样式完全一致
  预期的正确PDF样式应该和页面上展示的报表样式、内容位置完全匹配

内容的提问来源于stack exchange，提问作者ilyas