react打印页面中局部内容

说到打印前端页面中的内容，第一时间想到的方法就是window.print()，但是这个方法其实是会把当前页面上全部的内容（body标签内所包裹的）全部打印出来，显然是不符合我们的需求的，所以稍作变通，获取需要打印的部分的内容，赋值到body标签中，方式如下：

const print = () => {
  window.document.body.innerHTML = window.document.getElementById('content').innerHTML;  
  window.print(); 
  window.location.reload();
}

这样做确实可以实现打印局部内容的功能，但是有一个问题，由于我们把当前页面的内容赋值给了要打印的内容，打印完成之后是需要重新加载这一页面的（即使打印操作完成后将页面内容赋值回原来的也不行，因为无法判断用户点的是打印还是取消按钮）。

为了达到更好的效果，在网上搜索相关资料，找到了一个组件react-to-print

npm install --save react-to-print

使用方法有很多种，我们就选择调用useReactToPrint这一种：

const handlePrint = useReactToPrint({
    content: () => componentRef.current,
});

只需要将对应的需要打印的内容的ref传入即可，当然还可以传入其他的参数，可以在其GitHub页面中查看。

其实这个react-to-print也是借助于iframe来实现局部打印的功能的，我们可以试着来实现最基本的功能：

import { findDOMNode } from 'react-dom';

// content即为要打印的内容
const Print = (content) => {
  if (content === undefined || content === null) {
    return;
  }
  
  // 创建一个iframe
  const printWindow = document.createElement('iframe');
  printWindow.style.position = 'absolute';
  printWindow.style.top = '-1000px';
  printWindow.style.left = '-1000px';
  const contentNodes = findDOMNode(content);
  
  // 打印完成后关闭iframe窗口
  const removeWindow = (target) => {
    setTimeout(() => {
      target.parentNode.removeChild(target);
    }, 500);
  };

  // 触发打印操作
  const triggerPrint = (target) => {
    setTimeout(() => {
      target.contentWindow.focus();
      target.contentWindow.print();
      removeWindow(target);
    }, 500);
  };

  printWindow.onload = () => {
    const domDoc = printWindow.contentDocument || printWindow.contentWindow.document;
    domDoc.open();
    domDoc.write(contentNodes.outerHTML);
    domDoc.close();
    const defaultPageStyle = `
      @page { 
        size: auto;
        margin: 0mm;
      }
      @media print {
        body {
          -webkit-print-color-adjust: exact;
        }
      }
      html,body {
        overflow: auto!important;
        height: auto!important;
      }`;
    const styleEl =domDoc.createElement('style');
    styleEl.appendChild(domDoc.createTextNode(defaultPageStyle));
    domDoc.head.appendChild(styleEl);

    // 复制原先的样式
    const headEls = document.querySelectorAll('style, link[rel="stylesheet"]');
    Array.from(headEls).forEach((node, index) => {
      if (node.tagName === 'STYLE') {
        const newHeadEl = domDoc.createElement(node.tagName);
        if (node.sheet) {
          let styleCSS = '';
          for (let i = 0; i < node.sheet.cssRules.length; i++) {
            if (typeof node.sheet.cssRules[i].cssText === 'string') {
              styleCSS += ''.concat(node.sheet.cssRules[i].cssText, '\r\n');
            }
          }
          newHeadEl.setAttribute('id', 'react-to-print-'.concat(index));
          newHeadEl.appendChild(domDoc.createTextNode(styleCSS));
          domDoc.head.appendChild(newHeadEl);
        }
      }
    });
    triggerPrint(printWindow);
  };
  document.body.appendChild(printWindow);
};

export default Print;