react calls the browser print function js method (to solve the problem of the second blank page)

react calls the browser print function js method (to solve the problem of the second blank page)

It is used to print the content of the current window. Calling the print() method will generate a print preview popup box, allowing the user to set a print request. By default all contents of the window on the page are printed.

Two methods, the second method can solve the second blank page problem

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