pc端打印功能

1.<el-button size="mini" type="primary" @click="doPrint" class="ml20">打 印</el-button>

2.将需要打印的范围包裹住（定义id）

 <table border="1"  class="mt20 table"   id="printtable" >
          <tr >
            <td >产品</td>
            <td v-for="(item, index) in cp">     
            <dict-tag
            :options="dict.type.sys_prod_type"
            :value="item"
          /></td>
          </tr>
          <tr>
            <td>生产线</td>
            <td v-for="(item, index) in scx">{{ item }}</td>
          </tr>
          <tr>
            <td>规格</td>
            <td v-for="(item, index) in gg">{{ item }}</td>
          </tr>
          <tr>
            <td>运行参数</td>
            <td v-for="(item, index) in yxcs">{{ item }}</td>
          </tr>
          <tr v-for="(item, index) in date">
            <td>{{ item.date }}</td>
            <td v-for="(res, index1) in item.values">{{ res }}</td>
          </tr>
          <tr>
            <td>总合计</td>
            <td v-for="(item, index) in totalValue">{{ item }}</td>
          </tr>
        </table>

3.引入html2canvas和print-js插件

1. html2canvas插件

   1）npm install html2canvas --save
   2）页面引入 import html2canvas from “html2canvas”;

或者
1）定义html2canvas.min.js文件
2）页面引入import html2canvas from “@/utils/html2canvas.min.js”;
3）html2canvas.min.js文件

2. print-js插件
   1） npm install print-js --save
   2）页面引入 import print from ‘print-js’

4.打印功能实现（页面所见内容才能进行打印出来，如果隐藏或者没有来得及显示打印不出来）

 doPrint() {
      this.$nextTick(() => {
        let element = window.document.getElementById("printtable");
        html2canvas(element, {
          backgroundColor: null,
          useCORS: true,
          windowHeight: document.body.scrollHeight1,
        }).then((canvas) => {
          const url = canvas.toDataURL();
          // this.printImg = url;
          printJS({
            printable: url,
            type: "image",
            documentTitle: "月生产计划（单品）计划明细",
            scanStyles: false,
            repeatTableHeader: false,
            header: null,
          });
        });
      });
    },

5.结果
打印效果图