【发布时间】：2019-04-20 14:42:38
【问题描述】：
上个月我一直在尝试将我的 react 组件添加到 pdf 中而不在屏幕上显示它，但没有运气。
我已经用尽了我在 SOF 上可以找到的所有内容，例如 HTML2Canvas，在我的案例中无法使用，因为必须先渲染组件，然后才能将其转换为画布并添加它。
它不必在客户端中。
【问题讨论】：
标签： javascript reactjs pdf
【发布时间】：2019-04-20 14:42:38
【问题描述】：
你见过 CSS 中的打印媒体查询吗？
你可以的
@media print {
/* Your CSS */
}
您可以使用它在普通页面上隐藏带有 CSS 的组件，但在打印时您可以使该组件可见。不过，组件总是需要在 DOM 上。
【讨论】：
-
你能给我一个例子来说明它是如何工作的吗？
-
我不确定当我们要使用 display:none -> display:block 时它是否有效，因为首先无法找到该元素。我认为它只会反过来起作用。
-
@MohammadSaad 我不确定在打印样式表中使用 display: none 并切换到 display: block 的具体行为。如果这样做确实不起作用，那么您始终可以通过绝对显示元素然后使用屏幕外坐标来隐藏元素。但是，我会说这是一个“hacky”解决方案。如果您想更优雅，我建议您使用其他答案中提到的无头镀铬。
-
我认为 display:none 完全将其从 dom 中删除，与绝对位置相同。至于headless chrome，不渲染组件就行吗？
如果您只是想让用户使用打印对话框将您的页面打印为 pdf，那么 GavinHenderson5 的回答就足够了。如果您需要实际生成用户可以下载的 PDF 文件，那么将 GavinHenderson5 的解决方案与 Headless Chrome 之类的解决方案结合起来可能会更可取。
我们有一个后端端点设置，它有一个正在运行的 Chrome 实例，然后调用前端上的 URL（渲染的 React 组件）将其打印到 PDF。使用打印媒体查询，您可以双击组件的任何样式或display: none/block;，如果您想选择渲染。
【讨论】：
-
我正在尝试下载可下载的 pdf，正如我在另一条评论中提到的那样：我不确定当我们要显示时是否有效：无 -> 显示：块因为元素一开始是找不到的。我认为它只会反过来起作用。