局部打印

前端要实现局部打印 就是要把页面的部分信息通过打印机打出来
主要依赖html2canvas这个三方工具 和 window.print原生的api
html2canvas：这个工具的主要作用是传入dom来获取这个dom的截屏
window.print：呼起打印机打印页面
准备工作

npm install --save html2canvas

具体使用
.vue部分

    <div class="print">
      <p>需要打印的部分</p>
      <p>需要打印的部分</p>
      <p>需要打印的部分</p>
    </div>
    <div>
      <p>不会打印的部分</p>
      <p>不会打印的部分</p>
      <p>不会打印的部分</p>
    </div>
    <div class="print">
      <p>需要打印的部分</p>
      <p>需要打印的部分</p>
      <p>需要打印的部分</p>
    </div>

.js部分

    print() {
      const domList = [...document.querySelectorAll(".print")]; // 需要打印的部分会给上标识的class名
      const imgList = [];
      const count = 0;
      const fn = () => {
        /**
         * 打开新页 并append图片进去 再调用新页的打印就行了
         */
        const printWindow = window.open();
        imgList.forEach(img => {
          printWindow.document.body.append(img);
        });
        printWindow.print();
      };

      domList.forEach(dom => {
        // html2canvas不支持list 所以遍历一下
        html2canvas(dom).then(canvas => {
          /**
           * html2canvas接受dom会生成canvas 把canvas转成图片 方便打印用
           */
          const base64 = canvas.toDataURL();
          const img = new Image();
          img.onload = function() {
            /**
             * 因为会打印多个部分就会生成多张图片 还要有序 故有此操作
             */
            imgList[i] = this;
            count++;
            if (count >= domList.length) {
              fn();
            }
          };
          img.src = base64;
        });
      });
    },

重点解释下为什么要这样做？
如果直接在本页面调用print方法会打印整个页面 如果要实现局部打印就需要隐藏掉不需要的部分 麻烦的狠
那么这样做的优势就在于 不要繁琐的配置 只需把要的打印的部分生成图片 然后把生成的图片扔到新开的页里 新开的页面就只有需要打印的部分 这时调用新开页的print方法 完美
最后打印的效果还可以 反正产品是接受了 哈哈