使用React生成动态PDF

Question

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

1. @ react-pdf / renderer：这项工作是否有一些缺点：11s加载时间（来源：Bundlephobia）并使用基元（视图，图像，文本），因此样式有点不同。
2. jsPDF：很棒的库，但不支持CSS。它的造型过于陈述和重复。 （如果有人可以解释如何使用这种造型处理我的情况，那将非常受欢迎！）
3. 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