菊部打印

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