react 实现打印功能

 缺陷:打印期间页面内容会变成打印页面.直接上代码:

const printRef = useRef()

const doPrint = () => {
    document.querySelector('#root').style.display="none"
    document.body.appendChild(printRef.current)
    document.querySelector('#print').style.display="block"
    window.print(); //调用浏览器的打印功能打印指定区域
    document.querySelector('#print').style.display="none"
    document.body.removeChild(printRef.current)
    document.querySelector('#root').style.display="block"
  }


-----------------------------------------------

<div id="print" ref={printRef}  style={{ display: "none", textAlign: 'center'}}>
        <h1>待打印内容</h1>
</div>