创建反应组件的pdf

Question

上个月，我试图将我的react组件添加到pdf中而不在屏幕上显示它，但是没有运气。

我已经用尽了在SOF上可以找到的所有内容，例如HTML2Canvas，因为我必须先渲染该组件，然后才能将其转换为画布并添加它，因此无法使用。

它不必在客户端中。

Answer 1

您看到CSS中的印刷媒体查询了吗？

你可以

@media print { 
/* Your CSS */
}

您可以使用它在常规页面上隐藏带有CSS的组件，但是在进行打印时，您可以使该组件可见。不过，该组件将始终需要位于DOM上。

Answer 2

如果您只是想让用户使用打印对话框将页面打印为pdf，那么GavinHenderson5的答案就足够了。如果您需要实际生成可供用户下载的PDF文件，则最好使用GavinHenderson5的解决方案与Headless Chrome之类的组合。

我们有一个后端端点设置，该端点端点具有一个正在运行的Chrome实例，该实例然后调用前端（渲染的React组件）上的URL，并将其打印为PDF。使用印刷媒体查询，您可以对组件的任何样式进行两次浸渍，或者如果要为渲染进行选择则display: none/block;。