前端实现打印功能 - window.print

概述

window.print()
打开打印对话框打印当前文档。通俗点就是打印当前body里面的内容。

实现方式

很多时候我们都不会打印整个页面,而是打印页面的某一块，这个就需要我们借用其他的东西来达成我们目的。比如：iframe, 直接代码说话！！！
具体思路就是把需要打印的dom及其相关样式塞入一个iframe里面，然后执行里面的打印方法。

  /**
  * @param dom 需要打印的dom元素
  */
  const myPrint = (dom) => {
    writeIframe(dom);
    
    // 写入iframe
    function writeIframe(dom) {
      const iframe = document.createElement("iframe");
      iframe.setAttribute("style", "position:absolute;width:0;height:0;top:-10px;left:-10px;");
      document.body.appendChild(iframe);
      const doc = iframe.contentDocument;

      doc.open();
      doc.write(getStyle() + getHtml(dom));
      doc.close();

      iframe.onload = function () {
        iframe.contentWindow.print();

        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 100);
      };
    }

    // 获取样式
    function getStyle() {
      const styles = document.querySelectorAll("style,link");
      let str = "";

      for (let i = 0; i < styles.length; i++) {
        str += styles[i].outerHTML;
      }
      return str;
    }

    // 获取dom
    function getHtml(dom) {
      return dom.outerHTML;
    }
  };

其他优化

分页控制

• page-break-before 控制在指定元素前是否分页
• page-break-after 控制在指定元素后是否分页
  可选参数：auto|always|avoid|left|right|inherit
  详情可参考：page-break-after - CSS：层叠样式表 | MDN (mozilla.org)

@media print {
   div {
      page-break-after:always
   }
}

控制打印内容与打印纸的距离

@page {
  margin: 10px;
}

总结

上述方案略显简陋，不过足以应对产品的现有需求。
感觉方法封装优雅欠缺，后续会改进。