Question

将 React 页面导出为 PDF

2021-05-18

9090

reactjs pdf export-to-pdf

我希望能够将 React 页面导出为 PDF 文件。到目前为止，我已经尝试使用 jsPDF 和 html2canvas 将页面捕获为图像并将其保存为 pdf。示例代码：

const input = document.getElementById('exportToPDF')
    window.scrollTo(0,0)
    html2canvas(input)
      .then((canvas) => {
        document.body.appendChild(canvas)
        const imgData = canvas.toDataURL('image/png')
        const pdf = new jsPDF()
        pdf.addImage(imgData, 'PNG', 0, 0)
        pdf.save("test.pdf")
      });

和“exportToPDF”示例：

<div id="exportToPDF">...</div>

当页面内容太大/太长时，我遇到了画布被切断的问题。 如何在需要时将其分成多个页面？ 它似乎仅限于一页。

我尝试过的方法：将窗口宽度和高度设置为 html2canvas，但没有帮助。

更新：我愿意尝试其他方法将 React 页面导出为 PDF 文件，而不必使用免费的 html2canvas。

Answer 1

您是否尝试过 react-pdf 或 react-to-pdf 如果您不使用 next.js，这两个可能适合您

Michael Essiet

2021-05-18

Answer 2

我也遇到了同样的问题，现在通过使用 @progress/kendo-react-pdf 解决了。

访问 https://www.telerik.com/kendo-react-ui/components/pdfprocessing/ 获取示例

示例代码

import { PDFExport } from "@progress/kendo-react-pdf";
const ref: any = React.createRef();
...

<button onClick={() => {
            if (ref.current) {
              ref.current.save();
            }
          }}
>
  Export PDF
</button>
<div id="container">
    <PDFExport paperSize="A4" margin="0.5cm" ref={ref}>
        <div id="htmldata" >sample data</div>
    </PDFExport>
</div>

如果您不想显示 htmldata 的内容，您可以添加以下 css

#container {
 width: 0px;
  height: 0px;
  overflow: hidden;
}