时间戳

首页 > 解决方案 > 使用 React 生成动态 PDF

javascript - 使用 React 生成动态 PDF

问题描述

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

  1. @react-pdf/renderer：可以完成这项工作，但有几个缺点：11 秒的加载时间（来源：Bundlephobia）并使用原语（视图、图像、文本），因此样式有点不同。

  2. jsPDF：很棒的库，但不支持 CSS。它的样式过于声明性和重复性。（如果有人可以解释如何用这种样式处理我的情况，那将非常受欢迎！）

  3. html2canvas：与 jsPDF 结合使用。此方法首先截取页面的屏幕截图，然后使用新创建的图像（jpg 或 png）生成 PDF。真的很有用，但在这种情况下，当我没有在页面中显示我想在 PDF 中显示的实际“东西”时，它会抛出一个错误，而且，正如我告诉你的，我的目标是只显示一个标签。

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

非常感谢！

标签： javascriptreactjspdfjspdfhtml2canvas

解决方案

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

推荐阅读