在vue中引入打印插件PrintJs_plugin/print

引入

官网链接：https://printjs.crabbly.com/
直接放插件文件

import printJS from "@/plugin/print-js";
1

或者

npm install print-js --save
import printJS from 'print-js'
1
2

样例

UI用的是ElementUI

<el-row class="btnInfo">
  <el-button class="submitBtn" type="primary" @click="beforePrint">
    批量打印预览
  </el-button>
</el-row>
<el-dialog
  title="打印预览"
  :visible.sync="dialogVisible"
  class="bank-dialog"
  width="820px"
  :closeOnClickModal="false"
  :closeOnPressEscape="false">
  <div id="print_table_batch" style="">
    <!-- 这个是循环打印多个单据，一页放两张单据 -->
    <div v-for="(item, index) in multipleSelection.length === 0 ? []  : multipleSelection" :key="index">
      <div :style="{'page-break-after': index % 2 == 0 && index !== 0 ? 'always' : ''}"></div>
      <!-- 这个是要打印的内容组件 -->
      <verifiedResult :tableTitle="tableTitle" :tableData="item" :printMode="false"></verifiedResult>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="print">打印</el-button>
  </span>
</el-dialog>


//在print方法中执行打印，printable对应的id就是要打印的内容上面的div的id，打印的就是div包含的html内容，内容的样式在style里写。
print() {
  this.dialogVisible = false;
  this.$nextTick(() => {
    printJS({
      printable: "print_table_batch",
      type: "html",
      style: `
      .boxWrap{
        margin-bottom: 10px;
      }
      .verifiedTable{
        width:100%;
        border-collapse: collapse;
        table-layout: fixed;
      }
      .verifiedTitle{
        text-align: center;
        margin: 5px 0;
      }
      .verifiedTh_img{
        width: 82px;
        height: 20px;
        vertical-align: middle;
        margin-right:10px;
      }
      .verifiedTh_img_singed{
        width: 80px;
        height: 50px;
      }
      .verifiedTh_title{
        display: inline-block;
        vertical-align: middle;
        line-height: 20px;
        font-weight: 600;
      }
      td{
        border:1px solid #ccc;
        padding:4px;
        height: 16px;
        word-break: break-word;
        font-size: 12px;
      }
      .verifiedTd{
        width:20%;
        text-align: center;
        word-break: normal;
      }
      .verifiedTd_in{
        width:8%;
        text-align: center;
      }
      .text {
            color: #ff0000;
            padding-left: 10px;
        }
      .btnInfo{
          display: none;
      }`
    });
  });
}
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

看博文Print.js javascript库 实现页面打印