打印功能

1.触发打印页面的方法

  const handlePrint = () => {
    const el = document.getElementById('printElement'); //获取节点
    const iframe = document.createElement('IFRAME'); //创建一个新的节点
    let doc = null;
    document.body.appendChild(iframe);
    doc = iframe.contentWindow.document; //获取document
    doc.write(el.innerHTML);
    doc.close();
    // 获取iframe的焦点，从iframe开始打印
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    if (navigator.userAgent.indexOf('MSIE') > 0) {
      // navigator.userAgent 中有浏览器类别、版本，客户端操作系统等信息
      // 如果是微软的IE浏览器
      document.body.removeChild(iframe);
    }
  };

2. 打印页面展示内容

      <div id="printElement" style={{ display: 'none' }}>
        <PrintComponent printData={printData} /> //根据printData数据绘制的页面
      </div>