如何在单击按钮时打印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进行设置.

Answer 2

在6/19/2017，这对我来说很完美。

import React, {Component} from 'react'


class PrintThisComponent extends Component {

  componentDidMount() {

    console.log('PrintThisComponent mounted!')

  }

  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

Answer 3

我正在寻找一个简单的包来完成同样的任务，但没有找到任何东西，所以我创建了https://github.com/gregnb/react-to-print

你可以像这样使用它：

 <ReactToPrint
   trigger={() => <a href="#">Print this out!</a>}
   content={() => this.componentRef}
 />
 <ComponentToPrint ref={el => (this.componentRef = el)} />

Answer 4

您必须@media print {}在CSS中使用样式设置打印输出，但是简单的代码是：

export default class Component extends Component {

    print(){
        window.print();
    }


  render() {

  ...
  <span className="print"
              onClick={this.print}>
    PRINT
    </span>

  } 
}

希望对您有所帮助！

Answer 5

如果您要打印已经访问过的特定数据,无论是来自Store,AJAX还是其他地方,您可以利用我的库react-print.

https://github.com/captray/react-print

它使创建打印模板变得更加容易(假设您已经依赖于react).您只需要适当地标记HTML.

应该在实际的DOM树中将此ID添加到更高的位置,以排除除下面的"打印装载"之外的所有内容.

<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'));

值得注意的是,您可以在模板中创建新的或利用现有的子组件,并且所有内容都应该可以正常打印.

Answer 6

Emil Ingerslev 提供的解决方案工作正常，但 CSS 未应用于输出。在这里我找到了Andrewlimaza给出的一个很好的解决方案。它打印给定 div 的内容，因为它使用 window 对象的 print 方法，所以 CSS 不会丢失。而且也不需要额外的 iframe。

var printContents = document.getElementById("divcontents").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;

更新 1：存在异常行为，在 chrome/firefox/opera/edge 中，执行此代码后打印或其他按钮停止工作。

更新2：给出的解决方案在上面的评论链接中：

.printme { display: none;}
@media print { 
    .no-printme  { display: none;}
    .printme  { display: block;}
}

<h1 class = "no-printme"> do not print this </h1>    
<div class='printme'>
  Print this only 
</div>    
<button onclick={window.print()}>Print only the above div</button>