单击按钮如何打印React组件? [英] How to print React component on click of a button?

问题描述

如何在单击按钮时仅打印一个组件.

How can I print only one component on click of a button.

我知道此解决方案:

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

但是React不想使用框架.

But React doesn't want to work with a frame.

有解决方案吗?谢谢.

推荐答案

客户端上有两种解决方案.一种是像您张贴的框架.不过，您可以使用iframe:

There is kind of two solutions on the client. One is with frames like you posted. You can use an iframe though:

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"样式上隐藏您不想打印的所有内容.

The other solution is to use the media selector and on the media="print" styles hide everything you don't want to print.

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

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

Last way requires some work on the server. You can send all the HTML+CSS to the server and use one of many components to generate a printable document like PDF. I've tried setups doing this with PhantomJs.

这篇关于单击按钮如何打印React组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！