【发布时间】：2021-05-18 21:30:44
【问题描述】：
我希望能够将 React Page 导出为 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。
【问题讨论】：
-
你能说明导致问题的来源吗？谢谢。
-
html2canvas制作图像 - 如果 PDF 中有文本，您几乎肯定不想要图像 -
@AndyRay 你是对的。我愿意接受建议吗？
-
我们在某种程度上遇到了同样的问题，jspdf-yworks（现在是 jspdf v2.0）解决了。然而，我们决定使用服务器端转换器，通过在 python+flask 中使用 xhtml2pdf 将渲染的 DOM html 发送回服务器进行转换。它实际上是 6 行代码，并提供了更灵活的解决方案。一个缺点 - 样式和图像需要内联 - 这并不难。
标签： reactjs pdf export-to-pdf