React pdf导出不能一致工作

Question

我正在尝试在我的页面上导出报告。我试着使用了两个不同的库: jspdf和react- to -pdf，它们都不能一致地工作。在这两个库中，您必须将ref放在div上，它将转换为img到pdf。它正在转换，但是，如果我按10次导出pdf按钮，它会给我10个不同的pdf看起来不一样。这是我的导出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库3不同的pdf 1 2 3 jspdf库3不同的pdf 1 2 3

正如你所看到的，他们中的每一个都有不同的位置，而不需要在代码中做任何改变。正确的pdf格式应该类似于this格式。

Answer 1

回答有点晚了，但如果你仍然需要，你可以检查一下：generate-pdf-from-react-html

使用generate- PDF - from -react-html，您可以从包含样式的纯html生成具有不同方向和正确大小和布局的PDF。