菊部打印

前端要实现局部打印 就是要把页面的部分信息通过打印机打出来
主要依赖 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 方法 完美
最后打印的效果还可以 反正产品是接受了 哈哈