React实现局部HTML打印实践遇到的一些问题

我们知道浏览器有一个window.print()可以调起浏览器自带的打印页面的功能，它会把当前文档的body生成一个PDF进行打印，最新在业务开发中就使用了它来实现了一个局部页面打印的功能，虽然看起来很简单，但还是遇到了一些问题，例如：1. 微前端场景下的样式丢失 2. 尾部预留空白页 3. table重复打印tfooter等问题。直接跑demo点这里

1. 说说在React中实现一个局部打印功能的组件

实现的思路就是使用iframe，把iframe的body替换成需要打印的DOM，然后调用iframe里的window.print()实现打印功能。根据思路我们实现如下组件：

'use strict';

// 生成一个唯一的guid
function getGuid() {
  let s = [];
  let hexDigits = "0123456789abcdef";
  for (let i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4";
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
  s[8] = s[13] = s[18] = s[23] = "-";
  let uuid = s.join("");
  return uuid;
}

const style = `<style>
  @page: pseudo-class {
    size: A4 landscape;
    margin: 2 cm;
  }
  @media print {
    section {page-break-before: always;}
    h1 {page-break-after: always;}
    p {
      page-break-inside: avoid;
      orphans: 3;
      widows: 2;
    }
  }
</style>`

// 打印组件
class ReactPrint extends React.Component {
  constructor() {
    super();
    this.guid = getGuid();
    this.inter = null;
  }
  // 创建iframe容器
  createdIframe() {
    // 约定iframe的id为#reactPrintIframe
    let iframe = document.getElementById('reactPrintIframe');
    if (!iframe) {
      iframe = document.createElement('IFRAME');
      iframe.setAttribute('id', 'reactPrintIframe');
      // 让iframe不可见
      iframe.setAttribute('style', 'position:fixed;width:0px;height:0px;left:-3500px;top:-3500px;z-index:-1;margin:0;');
      document.body.appendChild(iframe);
    }
    return iframe;
  }
  // 获取需要打印的HTML
  getPrintContent() {
    return document.getElementById(this.guid).innerHTML;
  }
  // 获取当前内容所在document的head, 并且过滤掉js
  getParentHead() {
    const head = document.head;
    const childs = head.childNodes;
    for (var i = 0; i < childs.length; i++) {
      const child = childs[i];
      if (child.nodeType === 1 && child.tagName.toLowerCase() === 'script') {
        head.removeChild(child);
        i--;
      }
    }
    return head;
  }
  // 打印方法
  print() {
    if (this.inter) {
      clearTimeout(this.inter);
    }
    const iframe = this.createdIframe();
    const parentHead = this.getParentHead();
    let doc = iframe.contentWindow.document || iframe.contentDocument.document;


    doc.head.innerHTML = parentHead.innerHTML + style;
    doc.body.innerHTML = this.getPrintContent();
    doc.close();
    // 延迟打印
    this.inter = setTimeout(() => {
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
    }, 350);
  }
  render() {
    return e(
      'div', {
        id: this.guid,
      },
      this.props.children
    )
  }
}

根据功能和开头遇到的三个问题，简单的讲解一下每一块代码的所解决的问题。

getGuid主要是为了生成一个唯一的容器id，用来获取需要打印的DOM
ReactPrint.createdIframe很明显就是用来创建一个iframe，我们约定了一个iframe的id，避免重复创建iframe造成的不必要内存开销。
ReactPrint.getPrintContent通过guid用来获取需要打印的DOM
ReactPrint.getParentHead这个比较关键，我们获取当前页面的head，主要是为了获取样式相关的style、link载入到iframe中，这里方法里做了script标签的过滤，用不到js也没有必要加载，直接移除避免没有必要的异常情况。
ReactPrint.print 这个就核心的方法，进行iframe的DOM替换和样式动态加载，这里为什么print的时候放在setTimeout中，主要就是为了解决资源没有加载完毕就打印造成的样式和图片丢失问题，如果资源加载过慢用setTimeout还是无法解决的。

demo代码看这里

最后编辑于：2020.06.07 22:25:48