Question

如何使用React生成PDF并接受样式，使我不显示页面内容？我想在我的应用程序上显示一个链接（可能是一个标签），该链接生成PDF并立即在新标签上显示它。我已经测试了以下软件包，下面是它们的应用：（我找不到适合我需求的方法）。

@ react-pdf / renderer：可以完成这项工作，但有一些缺点：11s的加载时间（来源：Bundlephobia）并使用基元（View，Image，Text），因此样式略有不同。 p>
jsPDF：很棒的库，但不支持CSS。其样式过于说明性和重复性。（如果有人可以用这种样式来说明如何处理我的情况，那就太受欢迎了！）
html2canvas：与jsPDF结合使用。此方法首先获取页面的屏幕截图，然后使用新创建的图像（jpg或png）生成PDF。确实有用，但是在这种情况下，当我没有在页面中显示要在PDF中显示的实际“事物”时，这将使我出错，并且正如我告诉你的，我的目标是仅显示标签。

那么您对此有何看法？我该怎么办？

非常感谢！

Answer 1

我在后端使用pdfMake并通过google doc显示pdf：

        <iframe
          title="title"
          src={`https://docs.google.com/gview?url=${docUrl}&embedded=true`}
          style={{ height: "100%", width: "100%" }}
        />

这里的加载时间也是一个问题。您是否正在尝试将HTML直接转换为PDF？

Answer 2

Google的Puppeteer是一个Node API，可让您使用Node服务来控制Chrome的实例。利用这项技术，您可以使用任何Javascript框架（包括React）来生成PDF。

有关详细的分步指南，请参见：https://www.pdftron.com/blog/react/react-to-pdf 还有相关的开源项目https://github.com/PDFTron/web-to-pdf

Answer 3

我找到了这个库 - pdfmake。它允许我们设计 pdf 并且它有自己的样式，我们可以使用这个库动态传递数据。我在 ReactJS 中实现了这个。

用React生成动态PDF

3 个答案: