react 调用浏览器打印功能 js方法(解决第二页空白页问题)

用于打印当前窗口的内容,调用print()方法会产生一个打印预览弹框,让用户可以设置打印请求。默认打印页面中窗口的所有内容。

两种方法,第二种方法可解决第二页空白页问题

    const prints = () => {
        //方法一
        // window.document.body.innerHTML = window.document.getElementById('billDetails').innerHTML;
        // window.print();
        // window.location.reload();
    
        //方法二:此方法没有第二页空白页
        //可解决第二页空白页问题
          const win = window.open('','printwindow');
          win.document.write(window.document.getElementById('printArea').innerHTML);
          win.print();
          win.close();
    }
    return(
      <div>
        <div style={{ padding: 30, position: 'relative' }}>
          <PrinterFilled
            onClick={prints}
            style={{
              position: 'absolute',
              top: 30,
              right: 30,
              fontSize: 26,
              cursor: 'pointer',
            }}
          />
          <div id='printArea'>
            <h3 style={{ textAlign: 'center'}}>
              xx绩效评价表
            </h3>
         </div>
      </div>
  </div>
)            
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐