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

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