菊部打印

前端要實現局部打印 就是要把頁面的部分信息經過打印機打出來
主要依賴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方法 完美
最後打印的效果還能夠 反正產品是接受了 哈哈