vue插件(vue-print-nb)实现打印功能_vue打印插件

1、安装vue-print-nb

Vue2.0版本安装方法：
npm install vue-print-nb --save

Vue3.0版本安装方法：
npm install vue3-print-nb --save
1
2
3
4
5

2、引入Vue项目

Vue2.0引入方式：

// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)

// or

// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
  print
}
1
2
3
4
5
6
7
8
9
10
11

Vue3.0引入方式：

// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
 
// or 
 
// 2. 自定义指令
import print from 'vue3-print-nb'
 
directives: {
    print   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、在组件中使用

注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id

<!--//通过按钮来调用-->
 <el-button type="primary" round v-print="printContent">打印 </el-button>
<!--//需要打印的页面-->
<div id="printDiv" class="table-box">
  <div class="client-name">客户名称: XXX</div>
   <table
     v-for="(item, index) of tableData"
     class="table-item"
     :key="index"
     border="1px solid #ccc"
     cellspacing="0"
     cellpadding="0"
   >
     <tbody>
       <tr>
         <td class="head" rowspan="3">客户地址</td>
         <td rowspan="3" colspan="5">XXX</td>
         <td>本次抄表时间</td>
         <td>2023年1月1日</td>
       </tr>
       <tr>
         <td>上次抄表时间</td>
         <td>2022年1月1日</td>
       </tr>
       <tr>
         <td>互感器倍率</td>
         <td>1.5</td>
       </tr>
       <tr>
         <td class="head" rowspan="2">电表编号</td>
         <td class="head" rowspan="2">类型</td>
         <td class="head" colspan="3">正向有功(充电数据)</td>
         <td class="head" colspan="3">反向有功(放电数据)</td>
       </tr>

       <tr>
         <td class="head">上次示数(kWh)</td>
         <td class="head">本次示数(kWh)</td>
         <td class="head">本次充电(kWh)①</td>

         <td class="head">上次示数(kWh)</td>
         <td class="head">本次示数(kWh)</td>
         <td class="head">本次放电(kWh) ②</td>
       </tr>

       <tr>
         <td class="head" rowspan="5">并网表</td>
         <td>尖</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td>高</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>

         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td>平</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>

         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td>谷</td>
         <td>0</td>
         <td>0</td>

         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td class="head">总电量</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td class="head" colspan="8">结算明细</td>
       </tr>
       <tr>
         <td class="head">类型</td>
         <td class="head">电价③</td>
         <td class="head">客户效益费率④</td>
         <td class="head">
           结算数量(kWh)
           <br />
           ②-①
         </td>
         <td class="head">
           本期节约电费(元)
           <br />
           ⑤=(②-①)*③
         </td>
         <td class="head">
           本期客户电费收益(元)
           <br />
           ⑥=④*⑤
         </td>
         <td class="head" colspan="2">
           本期应结算电费(元)
           <br />
           ⑤-⑥
         </td>
       </tr>
       <tr>
         <td>尖</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td>高</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td>平</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td>谷</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td class="head">合计</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td colspan="3">本期节约电费(元) a</td>
         <td colspan="5">2000</td>
       </tr>
       <tr>
         <td colspan="3">本期客户电费收益(元) b</td>
         <td colspan="5">1000</td>
       </tr>
       <tr>
         <td colspan="3">本期应结算电费(元) c = a - b</td>
         <td colspan="2">1000</td>
         <td colspan="3">1000</td>
       </tr>
     </tbody>
   </table>

   <div class="bottom-box">
     <div>附页: 浙江省5月份电价、收款通知</div>
     <div>客户经办人</div>
     <div class="unit">
       <span>收款单位(签章): XXXXXXXXXXXXXXXXXX</span>
       <span>经办人: XXX</span>
     </div>
   </div>
 </div>
 
<!--//data的return中--> 
  data() {
    return {
      printContent: {
        id: 'printDiv',
        // preview: true, // 预览工具是否启用
        // previewTitle: '储能服务费结算单', // 预览页面的标题
        // popTitle: '储能服务费结算单', // 打印页面的页眉
        extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback () {
          console.log('正在加载预览窗口')
        },
        previewOpenCallback () {
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback (vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback (vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback () {
          console.log('关闭了打印工具')
        },
        clickMounted (vue) {
          console.log('点击了打印按钮')
          // vue.printSet.popTitle = vue.tableHead // 动态设置页眉
        }
    };
  },
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226

4、vue-print-nb插件优化

1.去掉页眉页脚

<style lang="scss" scoped>
@page {
    size: auto;
    margin: 0mm;
  }
</style>
1
2
3
4
5
6

2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word; 即可。

<style lang="scss" scoped>
  .procedure{
      word-wrap:break-word;
   }
</style>
1
2
3
4
5

3. 样式布局不生效问题

<style lang="scss">
@media print { 
  //样式写在这里面
}
 .title {
   word-wrap:break-word; //内容不自动换行问题
  }
</style>
1
2
3
4
5
6
7
8