javascript - 如何在单击按钮时打印 React 组件？

Question

如何在单击按钮时只打印一个组件。

我知道这个解决方案:

window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
$('.print_frame').remove();

但是 React 不想使用框架。

有什么解决办法吗？谢谢。

Answer 1

客户端有两种解决方案。一个是像你发布的框架。不过，您可以使用 iframe:

var content = document.getElementById("divcontents");
var pri = document.getElementById("ifmcontentstoprint").contentWindow;
pri.document.open();
pri.document.write(content.innerHTML);
pri.document.close();
pri.focus();
pri.print();

这期望此 html 存在

<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe>

另一种解决方案是使用媒体选择器并在 media="print" 样式上隐藏您不想打印的所有内容。

<style type="text/css" media="print">
   .no-print { display: none; }
</style>

最后一种方法需要在服务器上做一些工作。您可以将所有 HTML+CSS 发送到服务器，并使用众多组件之一生成可打印文档，如 PDF。我已经尝试使用 PhantomJs 进行设置。