react ro js 中打印指定区域内的内容

window.print()

• window.print()方法用于打印当前窗口的内容。
• 调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。
• 最简单的打印就是直接调用window.print()，
• 当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。 打印监听事件
• onbeforeprint(event),一个是onafterprint(event)分别表示打印事件触发前后
• 检测打印请求，提供一个打印前的处理事件onbeforeprint() 将一些不需要打印的元素隐藏，和打印后的处理事件 onafterprint()放开隐藏的元素

 window.onbeforeprint = function(event) {
 //将一些不需要打印的元素隐藏
 };
 window.onafterprint = function(event) {
 //放开隐藏的元素
};

react 中打印指定区域内的

export default class PreparView extends React.Component {
  refDiv = React.createRef();   // 创建ref获取实例   
  // 打印area
  area = (printpage) => {
      //将需要打印的内容用一个大的div包裹，打印时将body的内容替换为该div的内容，调用打印print()方法。
    const newstr = printpage.innerHTML;
    const oldstr = document.body.innerHTML;
    document.body.innerHTML = newstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
  };
  // 打印btn
  handlePrint = () => {
    this.area(this.refDiv.current.containerNode);
  };
      
  render(){
    return(
        <div>
            <Button onClick={this.handlePrint}>打印</Button>
            <BraftEditor
                ref={this.refDiv}   // 获取组件实例对象 
                style={{ width: '100%', height: '400px' }}
                value={this.editorState}
                onChange={this.handleEditorChange}
                onSave={this.submitContent}
            />
        </div>
    )
}

小菜鸟一个 嘿嘿大家多交流。欢迎讨论批评！