关于前端打印知识分享

常见前端打印处理思路
提起浏览器打印，不得不说一下前端打印常见的几种处理方式，由于直接调用window.print()调用浏览器打印功能，对于没有换页，内容不复杂的页面，是完全可以做到的，但是，对于要求比较苛刻的场景下就有点差强人意了，打印效果只能呵呵了。因此，为了方便大家以后使用打印功能，特别总结一下比较好的打印方式，和一些稍微差点的打印方法，并把他们优缺点总结如下。

1、通过id值获取当前页面中需要打印的DOM元素，通过打开新窗口来实现打印功能，这样做的优点是不影响现在页面的逻辑，缺点是目前大多数浏览器会屏蔽掉open方法弹出来的窗口，并且不能自动引入样式，打印效果差，因此，不太让人满意。

2、通过id值获取当前页面中需要打印的DOM元素，通过将现在页面中body中的innerHTML替换成需要打印的DOM元素内容。缺点是，破坏现有页面的逻辑操作，如果用户打印后，还要在原来操作基础上进行逻辑处理，显然是不可能了。优点是，打印预览效果和页面中效果一致，自动引入样式，打印效果良好。

3、通过id值获取当前页面中需要打印的DOM元素，将获取到的DOM元素，插入到iframe中，这样页面内容保持不变，不会破坏当前页面逻辑，打印后还可以在现有基础上进行逻辑处理后再打印，也不会弹出多余页面。
4、使用jsPdf插件生成pdf后打印，这种方式也是比较好的，但是如果对数据实时性要求比较高的话，就不太适合了。
当然了，转成pdf方式不止一种，也可以使用第三种方式进入打印预览界面，点击生成pdf。

下面就是实现第三种iframe方法实现打印：

（1）封装自己的打印函数，在需要打印处理的时候调用此函数。

function print(){

      const el = document.getElementById('需要打印的内容id值');

      const iframe = document.createElement('iframe');

      let doc = null;

      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;background:blue');

      document.body.appendChild(iframe);

      doc = iframe.contentWindow.document;

      // 引入打印的专有CSS样式

      doc.write("");

      doc.write("");

      doc.write(el.innerHTML);

      doc.write("");

      var ys="html,body{height:100%}h2{color:red}";

      var style=document.createElement("style");

      style.innerText=ys;

      doc.getElementsByTagName("head")[0].appendChild(style);

      doc.close();

      // 获取iframe的焦点，从iframe开始打印

      iframe.contentWindow.focus();

      iframe.contentWindow.print();

      iframe.contentWindow.close();

      if (navigator.userAgent.indexOf("MSIE") > 0)

      {

          document.body.removeChild(iframe);

      }

    }

（2）上边获取样式有些问题，因此，要在上边的基础上，封装自己的获取样式函数

function getStyle() {
    let str = "";
    let styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    return str;
  }

在写入样式的时候，调用此函数即可，将变量ys改为

var ys=getStyle()，就会将所有内联样式，外联样式，行内样式（通过dom操作获取打印内容时连同DOM一起引入）引入进来。这样点击打印，进入打印预览界面才像回事。

注意：如果你的打印预览界面，只有一页内容，那就是在设置打印样式的时候把height写死了。

换页

做好上边步骤还远远不够，如果，要在特定的地方加入换页，那又该怎么办？

有人会说：将打印内容获取到后，进入打印预览界面看看，如果在业务需要换页的地方刚好换了页，就不用处理了，如果没有换页，看看差多少距离，手动添加空内容将他换页。那么问题来了，如果打印相同的内容100份，总不能点一点慢慢调试吧。

针对上述问题，解决方法如下：

在页面样式的less文件中加入如下内容

@page {
  size: A4;
  margin:20px auto;
}
@media print {
  html, body {
      min-width: 0;
      width: 210mm; 
      height: auto;
      text-align: center!important;
  }
  .print-hide {
      visibility: hidden!important;
      display: none!important;
  }
}
.page{
  page-break-before:always !important;
}

如果在某个地方前边换页，只需要在该标签中加入className={style.page}(react中，根据环境而定)。
又有人说了，如果我想在某个地方的前边和后边通过时换页呢？

此时只需要将page样式做出如下修改：

.page{
  page-break-before:always !important;
  page-break-after:always !important;
}

打印前后事件

有些需求需要在打印后做一些逻辑处理，比如：告诉后端打印了多少等。此时需要使用打印前或者打印后事件。

（1）打印后事件，会在点击打印预览界面中确定或者取消时候触发，因此不能确定是点击的确定或者取消，使用的时候需要注意。

window.onafterprint = (event) => {
  console.log('After print');
};
或者
window.addEventListener('afterprint', ()=> {
  console.log('点击打印或点击取消');
});

（2）打印前事件，在调用windwo.print()后就会触发，进入打印预览页前被触发。

window.onbeforeprint = (event) => {
  console.log('before print');
};
或者
window.addEventListener('beforeprint', ()=> {
  console.log('调用打印预览');
});

打印二维码

如果在react项目中使用二维码，可以安装qrcode.react插件,使用的时候如下

由于二维码默认renderAs属性值为canvas，浏览器打印页面会自动忽略背景图，因此，在页面上有二维码，进入打印预览界面就失踪了，将renderAs属性值改为svg即可解决。

留在最后的彩蛋

如果你在打印预览界面看到页头或者页脚有网址或者当前网页标题，这不是你想要的，此时可以在样式中加入如下内容解决：

@page {
  size: auto;
  margin: 0mm; 
}

还没结束，彩蛋继续

附录：封装的打印函数

export default function Print(dom, options) {
  if (!(this instanceof Print)) return new Print(dom, options);

  this.options = this.extend(
    {
      noPrint: '.no-print',
      onStart() {},
      onEnd() {},
    },
    options
  );

  if (typeof dom === 'string') {
    this.dom = document.querySelector(dom);
  } else {
    this.dom = dom;
  }

  this.init();
}
Print.prototype = {
  init() {
    const content = this.getStyle() + this.getHtml();
    this.writeIframe(content);
  },
  extend(obj, obj2) {
    for (const k in obj2) {
      obj[k] = obj2[k];
    }
    return obj;
  },

  getStyle() {
    let str = '';
    const styles = document.querySelectorAll('style,link');
    for (let i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    str +=
      ``;

    return str;
  },

  getHtml() {
    const inputs = document.querySelectorAll('input');
    const textareas = document.querySelectorAll('textarea');
    const selects = document.querySelectorAll('select');

    for (const k in inputs) {
      if (inputs[k].type == 'checkbox' || inputs[k].type == 'radio') {
        if (inputs[k].checked == true) {
          inputs[k].setAttribute('checked', 'checked');
        } else {
          inputs[k].removeAttribute('checked');
        }
      } else if (inputs[k].type == 'text') {
        inputs[k].setAttribute('value', inputs[k].value);
      }
    }

    for (const k2 in textareas) {
      if (textareas[k2].type == 'textarea') {
        textareas[k2].innerHTML = textareas[k2].value;
      }
    }

    for (const k3 in selects) {
      if (selects[k3].type == 'select-one') {
        const child = selects[k3].children;
        for (const i in child) {
          if (child[i].tagName == 'OPTION') {
            if (child[i].selected == true) {
              child[i].setAttribute('selected', 'selected');
            } else {
              child[i].removeAttribute('selected');
            }
          }
        }
      }
    }

    return this.dom.outerHTML;
  },

  writeIframe(content) {
    let w;


let doc;


const iframe = document.createElement('iframe');


const f = document.body.appendChild(iframe);
    iframe.id = 'myIframe';
    iframe.style = 'position:absolute;width:0;height:0;top:-10px;left:-10px;';

    w = f.contentWindow || f.contentDocument;
    doc = f.contentDocument || f.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();
    this.toPrint(w, function() {
      document.body.removeChild(iframe);
    });
  },

  toPrint(w, cb) {
    const _this = this;
    w.onload = function() {
      try {
        setTimeout(function() {
          w.focus();
          typeof _this.options.onStart === 'function' && _this.options.onStart();
          if (!w.document.execCommand('print', false, null)) {
            w.print();
          }
          typeof _this.options.onEnd === 'function' && _this.options.onEnd();
          w.close();
          cb && cb();
        });
      } catch (err) {
        console.log('err', err);
      }
    };
  },
};
window.Print = Print;

使用的时候在项目中引进来，将需要打印部分最外层DOM节点放进来就可以了。
Print("#billDetail");