vue-print-nb的github地址: https://github.com/Power-kxLee/vue3-print-nb#print-the-entire-page
1.安装vue3-print-nb
1
| npm install vue3-print-nb
|
2.在main.ts中引入
1
2
3
4
5
|
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
|
3.Vue页面中
1
2
3
4
5
6
7
8
| <!-- 打印区域容器 -->
<div id="printBox">
<span>我就是被打印的内容</span>
<span>在#printBox 容器里的内容都会被打印噢</span>
</div>
<!-- 按钮绑定打印 -->
<button v-print="print">点击打开打印预览</button>
|
4.参数配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const print=ref({
id: 'printBox',
popTitle: '配置页眉标题',
extraHead: '',
preview: false,
previewTitle: '预览的标题',
previewPrintBtnLabel: '预览结束，开始打印',
zIndex: 20002,
previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); },
previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') },
beforeOpenCallback() { console.log('开始打印之前！') },
openCallback() { console.log('执行打印了！') },
closeCallback() { console.log('关闭了打印工具！') },
clickMounted() { console.log('点击v-print绑定的按钮了！') },
})
|
5.API参数
问题:因为有些数据并不在前端、需要我们通过后端请求返回后再去渲染页面的？但是点击打印按钮的时候就会直接渲染出打印页面，我们没办法阻止。
尝试：在 beforeOpenCallback()(调用打印工具前的回调函数)，想去推后页面渲染将ajax请求设置为同步请求，但是仍然无法阻止打印页面的渲染。
解决方法！！！！：
这算是一个曲线救国的方式。
既然点击打印按钮我们没办法阻止打印页面的渲染。那么就想办法将点击打印按钮的事件退后。那如何推后在请求完成后又能自动触发打印呢？
我们可以将原本的打印按钮作为 假打印按钮(还原为普通按钮，按钮中不再带v-print=”dataForm.printContent”的属性) 再打印的页面中做一个 真打印按钮（带有v-print=”dataForm.printContent”的属性）
假打印按钮 主要是去查询数据，等待ajax完成后在去自动触发 真打印按钮 ，这样就可以推迟打印页面的渲染。
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
| <div style="margin-top: 20px">
<el-table
:data="dataForm.dataList"
style="width: 100%"
:height="dataForm.tableSize"
border
header-align="center"
align="center"
>
<el-table-column
property="outputCode"
align="center"
:label="t('ui.InventoryOutput.outputCode')"
width="150"
>
<template #default="scope">
<el-button type="primary" @click="showDetail(scope.row)" link
>{{ scope.row.outputCode }}
</el-button>
</template>
</el-table-column>
<el-table-column
property="outputType"
align="center"
width="120"
:label="t('ui.InventoryOutput.outputType')"
/>
<el-table-column
property="outputTime"
align="center"
:label="t('ui.InventoryOutput.outputTime')"
width="160"
/>
<el-table-column
property="outputStatus"
align="center"
width="120"
:label="t('ui.InventoryOutput.outputStatus')"
>
<template v-slot="scope">
<el-tag type="danger">已出库 </el-tag>
</template>
</el-table-column>
<el-table-column
property="reason"
align="center"
width="150"
:label="t('ui.InventoryOutput.reason&use')"
/>
<el-table-column
property="person"
:label="t('ui.InventoryOutput.person')"
align="center"
width="100"
/>
<el-table-column
property="allQty"
align="center"
width="100"
:label="t('ui.InventoryOutput.allQty')"
/>
<el-table-column
property="createUser"
align="center"
:label="t('ui.common.createUser')"
width="120"
/>
<el-table-column
property="createTime"
align="center"
width="160"
:label="t('ui.common.createTime')"
/>
<el-table-column
property="updateUser"
align="center"
:label="t('ui.common.updateUser')"
width="120"
/>
<el-table-column
property="updateTime"
align="center"
width="160"
:label="t('ui.common.updateTime')"
/>
<el-table-column
property="action"
:label="t('ui.common.operation')"
align="center"
fixed="right"
width="200"
>
<template #default="scope">
重点1：表格中的按钮换为不带v-print属性的普通按钮！！！！！！！！！！！！！！！！！
<el-button @click="toPrint(scope.row)" link type="primary"
>打印
</el-button>
<el-button
link
type="primary"
:icon="useRenderIcon(Delete)"
@click="del(scope.row)"
>
{{ t("ui.common.delete") }}
</el-button>
</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
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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
| <div style="display: none">
重点2:在打印的内容中加真按钮 ！！！！！！！！！！！！
<button
id="btnPrint"
type="button"
value="按钮"
style="display: none"
v-print="dataForm.printContent"
/>
<div id="printTest">
<div style="page-break-after: always">
<el-row>
<div
style="
margin: auto;
font-size: 30px;
text-align: center;
color: rgb(0, 0, 0);
font-weight: 600;
"
>
装备调拨单
</div>
</el-row>
<el-row>
<el-col :span="24" style="font-size: 15px; color: #000000"
>配发时间:
年 月 日</el-col
>
</el-row>
<el-row>
<el-col :span="22"
><table
style="
margin-top: 20px;
height: 45px;
font-family: Arial, sans-serif;
font-size: 14px;
border-collapse: collapse;
color: #454545;
table-layout: auto;
width: 100%;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #000000;
"
ref="printId"
id="printId"
cellspacing="0"
cellpadding="0"
border="0"
>
<tbody>
<col style="width: 5%" />
<col style="width: 5%" />
<col style="width: 40%" />
<col style="width: 5%" />
<col style="width: 5%" />
<col style="width: 25%" />
<col style="width: 15%" />
<tr style="line-height: 23px">
<td
colspan="2"
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
调拨原因
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{ dataForm.printFrom.reason }}
</td>
<td
colspan="2"
style="
width: 30px;
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
调拨单号
</td>
<td
colspan="2"
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{ dataForm.printFrom.outputCode }}
</td>
</tr>
<tr style="line-height: 23px">
<td
colspan="2"
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
接收单位
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{}}
</td>
<td
colspan="2"
style="
width: 30px;
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
接收人
</td>
<td
colspan="2"
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{}}
</td>
</tr>
<tr style="line-height: 23px">
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
序号
</td>
<td
colspan="2"
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
装备名称
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
单位
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
数量
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
编号
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
附件
</td>
</tr>
<tr
v-for="(item, index) in dataForm.printFrom.printDataList"
:key="index"
>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{ index + 1 }}
</td>
<td
colspan="2"
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
text-align: left;
"
>
{{ item.name }}
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{ item.unitName }}
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{ item.outputQty }}
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{ item.content }}
</td>
<td
style="
border-width: 1px;
border-style: solid;
border-color: #000000;
"
>
{{}}
</td>
</tr>
</tbody>
</table></el-col
>
<el-rol :span="1"> </el-rol>
<el-col :span="1">
<br />
<h
>第<br />
一<br />
联<br />
<br />
调<br />
拨<br />
单<br />
位<br />
留<br />
存<br />
</h>
</el-col>
</el-row>
<br />
<el-row>
<el-col :span="8"> 调拨单位(盖章): </el-col>
<el-col :span="8"> 审批领导: </el-col>
<el-col :span="8"> 经办人: </el-col>
</el-row>
</div>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function toPrint(row) {
dataForm.printFrom.tempRow = row;
dataForm.printFrom.outputCode = dataForm.printFrom.tempRow.outputCode;
dataForm.printFrom.reason = dataForm.printFrom.tempRow.reason;
proxy.ajax({
url: "/pla/inventoryOutput/queryPrintByOutputCode",
method: "post",
data: {
outputCode: dataForm.printFrom.tempRow.outputCode
},
success(res) {
dataForm.printFrom.printDataList = res;
重点3. 等待页面渲染完成后再执行自动触发按钮！！！！！！！！！！！！nextTick的作用就是等待前面任务的页面渲染完成后再继续执行下去！！！
proxy.$nextTick(() => {
document.getElementById("btnPrint").click();
});
}
});
}
|
