创建反应组件的pdf

Posted 2021-03-27

我上个月试图将我的反应组件添加到pdf而不在屏幕上显示，没有运气。

我已经厌倦了我在SOF上找到的所有内容，例如html2Canvas，它不能在我的情况下使用，因为在将组件转换为画布并添加它之前必须渲染组件。

它不必在客户端。

答案

你在CSS中看过打印媒体查询吗？

你可以做

@media print { 
/* Your CSS */
}

您可以使用它在普通页面上隐藏带有CSS的组件，但是当涉及到打印时，您可以使该组件可见。该组件总是需要在DOM上。

另一答案

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

我们有一个后端端点设置，其中有一个正在运行的Chrome实例，然后调用前端（呈现的React组件）上的URL将其打印为PDF。使用打印介质查询，如果要选择渲染，可以双击任何组件样式或display: none/block;。