如何通过单击按钮仅打印一个组件。
我知道这个解决方案：
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
$('.print_frame').remove();
但是 React 不想使用框架。
任何解决方案？谢谢你。
如何在单击按钮时打印 React 组件？
IT技术
javascript
reactjs
2021-04-06 06:24:50
6个回答
客户端有两种解决方案。一个是像你张贴的框架。不过，您可以使用 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 进行设置。
我正在寻找一个简单的包来完成同样的任务，但没有找到任何东西，所以我创建了https://github.com/gregnb/react-to-print
你可以像这样使用它：
<ReactToPrint
trigger={() => <a href="#">Print this out!</a>}
content={() => this.componentRef}
/>
<ComponentToPrint ref={el => (this.componentRef = el)} />
您必须@media print {}在 CSS 中设置打印输出的样式，但简单的代码是：
export default class Component extends Component {
print(){
window.print();
}
render() {
...
<span className="print"
onClick={this.print}>
PRINT
</span>
}
}
希望这有帮助！
2017 年 6 月 19 日这对我来说非常有效。
import React, { Component } from 'react'
class PrintThisComponent extends Component {
render() {
return (
<div>
<button onClick={() => window.print()}>PRINT</button>
<p>Click above button opens print preview with these words on page</p>
</div>
)
}
}
export default PrintThisComponent
如果您想打印您已经有权访问的特定数据，无论是来自 Store、AJAX 还是其他地方可用的数据，您都可以利用我的库 react-print。
https://github.com/captray/react-print
它使创建打印模板变得更加容易（假设您已经依赖于 react）。您只需要适当地标记您的 HTML。
这个 ID 应该在你的实际 DOM 树中添加到更高的位置，以排除下面除了“打印安装”之外的所有内容。
<div id="react-no-print">
这是您的 react-print 组件将安装和包装您创建的模板的地方：
<div id="print-mount"></div>
一个例子看起来像这样：
var PrintTemplate = require('react-print');
var ReactDOM = require('react-dom');
var React = require('react');
var MyTemplate = React.createClass({
render() {
return (
<PrintTemplate>
<p>Your custom</p>
<span>print stuff goes</span>
<h1>Here</h1>
</PrintTemplate>
);
}
});
ReactDOM.render(<MyTemplate/>, document.getElementById('print-mount'));
值得注意的是，您可以在模板中创建新的或利用现有的子组件，并且一切都应该可以很好地进行打印。