vue使用printjs打印el-table_vue3 print-js el-table

vue使用printjs打印el-table

npm install print-js --save
1

import printJS from 'print-js'
1

1.打印样式丢失肿么办？？？（写行内样式）-----2.el-table样式缺失（在@media print修改或补充）

 <div id="main">
  <div style="margin: 14px 0; font-size: 18px">
          <span style="margin-right: 10px">【编号】</span
   </div>
    <el-table
            :data="tablePrintData"
            border
            style="width: 100%; margin-top: 8px"
          >
            <el-table-column
              v-for="(item, index) in tableHeadOfPrint"
              :label="item.ITEM_NAME"
              :key="index"
            >
              <template slot-scope="scope">
                <span
                  style="display: inline-block; height: 100%"
                  :class="
                    scope.row[item.NAME] < item.REFERENCE_LOWER ||
                    scope.row[item.NAME] > item.REFERENCE_UPPER
                      ? 'redColor'
                      : ''
                  "
                  >{{ scope.row[item.NAME] }}</span
                >
              </template>
            </el-table-column>
      </el-table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

方法1

    print() {
      const style = '@page {  } ' + '@media print {td{border:1px    solid #000;text-align:center;height:40px}th{border:1px solid #000} }';//这里修改的是el-table边框问题

      printJS({
        printable: 'main',	//打印区域id
        type: 'html',		//打印类型是html
        scanStyles: false,
        style: style,
        targetStyles: ['*'],
      })
    },
1
2
3
4
5
6
7
8
9
10
11

方法2—针对答应el-table内容过多列显示不完全

      const printContent = this.$refs.printId;
      const width = printContent.clientWidth;
      const height = printContent.clientHeight;
      const canvas = document.createElement('canvas');
      const scale = 4; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
      canvas.width = width * scale;
      canvas.height = height * scale;
      canvas.style.width = width * scale + 'px';
      canvas.style.height = height * scale + 'px';
      canvas.getContext('2d').scale(scale, scale);
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 
      html2canvas(printContent, {
        canvas,
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight,
        scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
        scrollY: -scrollTop
      }).then((canvas) => {
        const url = canvas.toDataURL('image/png')
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '', // 标题
          style: '@page{size:auto;margin: 0.5cm 1cm 0cm 1cm;}' // 去除页眉页脚
        })
      }).catch(err => {
        console.error(err);
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30