vg-print 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +300 -532
- package/dist/{static/js/index-B9GDVLYq.js → vg-print.cjs.js} +74 -78
- package/dist/{static/js/index-DzQpR9xz.js → vg-print.es.js} +5538 -5488
- package/dist/{static/js/index-DGNiOn6N.js → vg-print.umd.js} +93 -97
- package/package.json +8 -7
- /package/dist/{static/css → assets}/style-BqaoRoY7.css +0 -0
- /package/dist/{static/js/purify.es-CKk_t3XZ.js → purify.es-CKk_t3XZ.js} +0 -0
- /package/dist/{static/js/purify.es-CYVvLED6.js → purify.es-CYVvLED6.cjs} +0 -0
package/README.md
CHANGED
|
@@ -1,638 +1,406 @@
|
|
|
1
|
-
|
|
1
|
+
vg-print (基于 [hiprint 2.5.4](http://hiprint.io/)) 当时只是为了方便 <span style="color: red">我（并非 hiprint 原作者）</span> 在 vue 项目中引入使用，所以以此命名。
|
|
2
2
|
|
|
3
3
|
此 <span style="color: red">插件</span> 仅仅是一个 <span style="color: red">JavaScript【工具库】</span> 而非 <span style="color: yellow">Vue【组件库】</span>，所以它默认不包含 demo 中的那些组件页面（demo 代码可复制使用）。
|
|
4
4
|
|
|
5
5
|
由于 hiprint 官网最后一次更新时间为 2019 年【hiprint 2.5.4 是 [LGPL](#关于lgpl协议) 协议】，后在诸多使用者及反馈下进行了许多优化调整。
|
|
6
6
|
|
|
7
|
-
## vue-plugin-hiprint
|
|
8
|
-
|
|
9
|
-
> [✨ 立即体验(Github 访问慢)](https://ccsimple.github.io/vue-plugin-hiprint/) <br/><br/> [✨ 国内访问(www.ibujian.cn)](https://www.ibujian.cn/) <br/><br/> [🌈 更新日志 (页面支持 Ctrl + F 搜索)](CHANGELOG.md) <br/><br/> [🐛 常见问题(入门必看!)](#常见问题) ⚠️⚠️ [📕 系列教程文章(入门必看!)](#文章链接) <br/><br/> [🚀 项目生态(打印客户端、node 服务端、uniapp)](#插件生态)
|
|
10
|
-
|
|
11
|
-
> hiprint for Vue2.x / Vue3.x (基于 jQuery, 理论上其他框架可用。[react demo 分支](https://github.com/CcSimple/vue-plugin-hiprint/tree/react_demo))
|
|
12
|
-
|
|
13
|
-
> **jQuery/uniapp (html/h5)** 项目 见下方 [jQuery/uniapp 项目使用](#jqueryuniapp-项目使用)
|
|
14
|
-
|
|
15
7
|
> [!IMPORTANT]
|
|
16
8
|
>
|
|
17
9
|
> **注意事项**
|
|
18
10
|
>
|
|
19
|
-
> - NodeJs 需要
|
|
11
|
+
> - NodeJs 需要 18.x 版本 (开发使用 18.18.0)
|
|
20
12
|
> - <div style="color: red">【vue-plugin-hiprint】与【hiprint.io官网】差异甚多,请忽混用!请忽混用!请忽混用!</div>
|
|
21
13
|
> - <div style="color: orange">请使用项目关联的打印客户端,或者自行修改打印客户端的源码,以适配本项目的模板!</div>
|
|
22
|
-
> - 主分支是融合版本的最新代码,如果你不需要修改 hiprint 相关代码. 请使用 npm
|
|
23
|
-
> - 使用直接客户端时,本地开发连接没问题,部署到线上出现跨域无法连接打印客户端问题:
|
|
24
|
-
> - [线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html](https://www.cnblogs.com/daysme/p/15493523.html)
|
|
25
|
-
> - 如需提交 PR 请前往 github 合并后可自动发布 npm 包并同步代码到 gitee
|
|
26
|
-
> - vue-plugin-hiprint 包不包含 UI 界面,需要自行处理。如果想更快速引入请查看 [sv-print 组件库](https://www.ibujian.cn/svp/)
|
|
14
|
+
> - 主分支是融合版本的最新代码,如果你不需要修改 hiprint 相关代码. 请使用 npm 包的方式安装
|
|
27
15
|
|
|
28
|
-
|
|
16
|
+
# vg-print 使用与 API 说明
|
|
29
17
|
|
|
30
|
-
|
|
18
|
+
## 安装
|
|
31
19
|
|
|
32
|
-
|
|
20
|
+
```
|
|
21
|
+
npm i vg-print
|
|
22
|
+
```
|
|
33
23
|
|
|
34
|
-
|
|
24
|
+
## 样式
|
|
35
25
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<td><img height="160" src="https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/wmp.jpg"/></td>
|
|
40
|
-
</tr>
|
|
41
|
-
</table>
|
|
26
|
+
```
|
|
27
|
+
import 'vg-print/dist/style.css'
|
|
28
|
+
```
|
|
42
29
|
|
|
43
|
-
|
|
30
|
+
在 `index.html` 添加：
|
|
44
31
|
|
|
45
32
|
```
|
|
46
|
-
|
|
33
|
+
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css" />
|
|
47
34
|
```
|
|
48
35
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
36
|
+
## 核心 API
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
import { hiprint, register, setConfig, createPrintTemplate, print, print2, toPdf, toImage } from 'vg-print'
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
- `register({ authKey, plugins })`
|
|
43
|
+
- `setConfig(config)`
|
|
44
|
+
- `createPrintTemplate(options)`
|
|
45
|
+
- `print({ templateJson, data, options, provider })`
|
|
46
|
+
- `print2({ templateJson, data, options, provider })`
|
|
47
|
+
- `toPdf({ template, data, name, pdfOptions })`
|
|
48
|
+
- `toImage({ template, data, imageOptions })`
|
|
49
|
+
- 直接访问 `hiprint.hiwebSocket` 获取连接与打印机列表
|
|
50
|
+
|
|
51
|
+
### 快速示例
|
|
52
|
+
|
|
66
53
|
```
|
|
54
|
+
import { register, createPrintTemplate } from 'vg-print'
|
|
55
|
+
import pluginEleBwip from '@vg-print/plugin-ele-bwip-js'
|
|
56
|
+
|
|
57
|
+
register({ authKey: '', plugins: [pluginEleBwip({})] })
|
|
67
58
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</table>
|
|
84
|
-
|
|
85
|
-
## 拖拽设计使用(推荐)
|
|
86
|
-
|
|
87
|
-
```javascript
|
|
88
|
-
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
|
|
89
|
-
// 初始化可拖拽的元素
|
|
90
|
-
hiprint.init({
|
|
91
|
-
providers: [new defaultElementTypeProvider()],
|
|
92
|
-
});
|
|
93
|
-
// $('.ep-draggable-item') 包含 tid, 与上边的 provider 中的 tid 对应 才能正常拖拽生成元素
|
|
94
|
-
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
|
|
95
|
-
hiprintTemplate = new hiprint.PrintTemplate({
|
|
96
|
-
template: {}, // 模板json
|
|
97
|
-
settingContainer: "#PrintElementOptionSetting", // 元素参数容器
|
|
98
|
-
paginationContainer: ".hiprint-printPagination", // 多面板的容器， 实现多面板， 需要在添加一个 <div class="hiprint-printPagination"/>
|
|
99
|
-
// ------- 下列是可选功能 -------
|
|
100
|
-
// ------- 下列是可选功能 -------
|
|
101
|
-
// ------- 下列是可选功能 -------
|
|
102
|
-
// 图片选择功能
|
|
103
|
-
onImageChooseClick: (target) => {
|
|
104
|
-
// 测试 3秒后修改图片地址值
|
|
105
|
-
setTimeout(() => {
|
|
106
|
-
// target.refresh(url,options,callback)
|
|
107
|
-
// callback(el, width, height) // 原元素,宽,高
|
|
108
|
-
// target.refresh(url,false,(el,width,height)=>{
|
|
109
|
-
// el.options.width = width;
|
|
110
|
-
// el.designTarget.css('width', width + "pt");
|
|
111
|
-
// el.designTarget.children('.resize-panel').trigger($.Event('click'));
|
|
112
|
-
// })
|
|
113
|
-
target.refresh(
|
|
114
|
-
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAIIAQMAAAB99EudAAAABlBMVEUmf8vG2O41LStnAAABD0lEQVR42u3XQQqCQBSAYcWFS4/QUTpaHa2jdISWLUJjjMpclJoPGvq+1WsYfiJCZ4oCAAAAAAAAAAAAAAAAAHin6pL9c6H/fOzHbRrP0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0u/SY9LS0tLS0tLS0tLS0n+edm+UlpaWlpaWlpaWlpaW/tl0Ndyzbno7/+tPTJdd1wal69dNa6abx+Lq6TSeYtK7BX/Diek0XULSZZrakPRtV0i6Hu/KIt30q4fM0pvBqvR9mvsQkZaW9gyJT+f5lsnzjR54xAk8mAUeJyMPwYFH98ALx5Jr0kRLLndT7b64UX9QR/0eAAAAAAAAAAAAAAAAAAD/4gpryzr/bja4QgAAAABJRU5ErkJggg==",
|
|
59
|
+
const templateJson = { /* 模板json */ }
|
|
60
|
+
const t = createPrintTemplate({ template: templateJson })
|
|
61
|
+
t.print({ name: '测试' })
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Provider 插件示例
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
import { hiprint } from 'vg-print'
|
|
68
|
+
|
|
69
|
+
export default function(options) {
|
|
70
|
+
const addElementTypes = function(context) {
|
|
71
|
+
context.removePrintElementTypes('vgModule')
|
|
72
|
+
context.addPrintElementTypes('vgModule', [
|
|
73
|
+
new hiprint.PrintElementTypeGroup('自定义', [
|
|
115
74
|
{
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
75
|
+
tid: 'vgModule.text',
|
|
76
|
+
type: 'text',
|
|
77
|
+
title: '文本',
|
|
78
|
+
options: { title: '文本', field: 'text', testData: '123' }
|
|
120
79
|
}
|
|
121
|
-
)
|
|
122
|
-
|
|
123
|
-
// target.getValue()
|
|
124
|
-
// target.refresh(url)
|
|
125
|
-
},
|
|
126
|
-
// 自定义可选字体
|
|
127
|
-
// 或者使用 hiprintTemplate.setFontList([])
|
|
128
|
-
// 或元素中 options.fontList: []
|
|
129
|
-
fontList: [
|
|
130
|
-
{ title: "微软雅黑", value: "Microsoft YaHei" },
|
|
131
|
-
{ title: "黑体", value: "STHeitiSC-Light" },
|
|
132
|
-
{ title: "思源黑体", value: "SourceHanSansCN-Normal" },
|
|
133
|
-
{ title: "王羲之书法体", value: "王羲之书法体" },
|
|
134
|
-
{ title: "宋体", value: "SimSun" },
|
|
135
|
-
{ title: "华为楷体", value: "STKaiti" },
|
|
136
|
-
{ title: "cursive", value: "cursive" },
|
|
137
|
-
],
|
|
138
|
-
dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
|
|
139
|
-
history: true, // 是否需要 撤销重做功能
|
|
140
|
-
onDataChanged: (type, json) => {
|
|
141
|
-
// 模板发生改变回调
|
|
142
|
-
console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
|
|
143
|
-
console.log(json); // 返回 template
|
|
144
|
-
},
|
|
145
|
-
onUpdateError: (e) => {
|
|
146
|
-
// 更新失败回调
|
|
147
|
-
console.log(e);
|
|
148
|
-
},
|
|
149
|
-
});
|
|
150
|
-
// 设计器的容器
|
|
151
|
-
hiprintTemplate.design("#hiprint-printTemplate");
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
## 代码模式使用(不推荐)
|
|
155
|
-
|
|
156
|
-
```javascript
|
|
157
|
-
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
|
|
158
|
-
// 引入后使用示例
|
|
159
|
-
hiprint.init();
|
|
160
|
-
// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
|
|
161
|
-
var hiprintTemplate = new hiprint.PrintTemplate();
|
|
162
|
-
var panel = hiprintTemplate.addPrintPanel({
|
|
163
|
-
width: 100,
|
|
164
|
-
height: 130,
|
|
165
|
-
paperFooter: 340,
|
|
166
|
-
paperHeader: 10,
|
|
167
|
-
});
|
|
168
|
-
//文本
|
|
169
|
-
panel.addPrintText({
|
|
170
|
-
options: {
|
|
171
|
-
width: 140,
|
|
172
|
-
height: 15,
|
|
173
|
-
top: 20,
|
|
174
|
-
left: 20,
|
|
175
|
-
title: "hiprint插件手动添加text",
|
|
176
|
-
textAlign: "center",
|
|
177
|
-
},
|
|
178
|
-
});
|
|
179
|
-
//条形码
|
|
180
|
-
panel.addPrintText({
|
|
181
|
-
options: {
|
|
182
|
-
width: 140,
|
|
183
|
-
height: 35,
|
|
184
|
-
top: 40,
|
|
185
|
-
left: 20,
|
|
186
|
-
title: "123456",
|
|
187
|
-
textType: "barcode",
|
|
188
|
-
},
|
|
189
|
-
});
|
|
190
|
-
//二维码
|
|
191
|
-
panel.addPrintText({
|
|
192
|
-
options: {
|
|
193
|
-
width: 35,
|
|
194
|
-
height: 35,
|
|
195
|
-
top: 40,
|
|
196
|
-
left: 165,
|
|
197
|
-
title: "123456",
|
|
198
|
-
textType: "qrcode",
|
|
199
|
-
},
|
|
200
|
-
});
|
|
201
|
-
//长文本
|
|
202
|
-
panel.addPrintLongText({
|
|
203
|
-
options: {
|
|
204
|
-
width: 180,
|
|
205
|
-
height: 35,
|
|
206
|
-
top: 90,
|
|
207
|
-
left: 20,
|
|
208
|
-
title: "长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行",
|
|
209
|
-
},
|
|
210
|
-
});
|
|
211
|
-
//打印
|
|
212
|
-
hiprintTemplate.print({});
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
## vue/vue3 全局引入
|
|
216
|
-
|
|
217
|
-
> 全局引入，方便在任何地方不引入直接调用打印
|
|
218
|
-
|
|
219
|
-
```javascript
|
|
220
|
-
// main.js中 引入安装
|
|
221
|
-
import { hiPrintPlugin } from "vue-plugin-hiprint";
|
|
222
|
-
Vue.use(hiPrintPlugin, "$pluginName"); // $pluginName 为自定义名称
|
|
223
|
-
hiPrintPlugin.disAutoConnect();
|
|
224
|
-
|
|
225
|
-
/// 提供的全局方法：
|
|
226
|
-
|
|
227
|
-
// this.$pluginName == hiprint 全局对象
|
|
228
|
-
let hiprintTemplate = this.$pluginName.PrintTemplate({
|
|
229
|
-
template: {}, // 模板json [对象]
|
|
230
|
-
});
|
|
231
|
-
hiprintTemplate.print({name:'i不简'});
|
|
232
|
-
|
|
233
|
-
/// provider 不能为null, 可以为 undefined args: 同模板对应调用 print 方法
|
|
234
|
-
|
|
235
|
-
// 1. 打印
|
|
236
|
-
this.$print(undefined, templateJson, ...args);
|
|
237
|
-
this.$print(provider, templateJson, ...args);
|
|
238
|
-
// 2. 直接打印
|
|
239
|
-
this.print2(undefined, templateJson, ...args);
|
|
240
|
-
this.print2(provider, templateJson, ...args);
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
## jQuery/uniapp 项目使用
|
|
244
|
-
|
|
245
|
-
> uniapp 需要嵌入到 web 浏览器中.(需要支持 window 全局对象环境)
|
|
246
|
-
|
|
247
|
-
```html
|
|
248
|
-
<!-- index.html -->
|
|
249
|
-
<head>
|
|
250
|
-
<!-- 打印样式是必须的，你可以调整成自由链接， 注意 media="print" 名称 print-lock.css -->
|
|
251
|
-
<link
|
|
252
|
-
rel="stylesheet"
|
|
253
|
-
type="text/css"
|
|
254
|
-
media="print"
|
|
255
|
-
href="https://unpkg.com/vue-plugin-hiprint@latest/dist/print-lock.css"
|
|
256
|
-
/>
|
|
257
|
-
<!-- 下列使用的都是 unpkg提供的 稳定性未知, 建议下载自行处理 -->
|
|
258
|
-
<!-- jquery 必须 -->
|
|
259
|
-
<script src="https://unpkg.com/jquery@3.6.1/dist/jquery.js"></script>
|
|
260
|
-
<!-- 条形码 -->
|
|
261
|
-
<script src="https://unpkg.com/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
|
|
262
|
-
<!-- 二维码、条形码 bwip-js -->
|
|
263
|
-
<script src="https://unpkg.com/bwip-js@4.5.1/dist/bwip-js.js"></script>
|
|
264
|
-
<!-- 数字转大写 -->
|
|
265
|
-
<script src="https://unpkg.com/nzh@1.0.14/dist/nzh.min.js"></script>
|
|
266
|
-
<!-- 颜色选择器 -->
|
|
267
|
-
<script src="https://unpkg.com/@claviska/jquery-minicolors@2.3.6/jquery.minicolors.min.js"></script>
|
|
268
|
-
<!-- 直接打印(print2)需要 -->
|
|
269
|
-
<script src="https://unpkg.com/socket.io-client@4.5.1/dist/socket.io.min.js"></script>
|
|
270
|
-
<!-- toPdf需要 -->
|
|
271
|
-
<script src="https://unpkg.com/canvg@3.0.10/lib/umd.js"></script>
|
|
272
|
-
<script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
|
|
273
|
-
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.js"></script>
|
|
274
|
-
<!-- vue-plugin-hiprint 😃 -->
|
|
275
|
-
<script src="https://unpkg.com/vue-plugin-hiprint@latest/dist/vue-plugin-hiprint.js"></script>
|
|
276
|
-
</head>
|
|
277
|
-
<body>
|
|
278
|
-
<!-- 注意 defer -->
|
|
279
|
-
<script defer>
|
|
280
|
-
console.log("vue-plugin-hiprint");
|
|
281
|
-
console.log(window["vue-plugin-hiprint"]);
|
|
282
|
-
console.log("hiprint");
|
|
283
|
-
// hiprint 以注入 全局
|
|
284
|
-
console.log(hiprint);
|
|
285
|
-
var autoConnect = window["vue-plugin-hiprint"].autoConnect,
|
|
286
|
-
disAutoConnect = window["vue-plugin-hiprint"].disAutoConnect,
|
|
287
|
-
defaultElementTypeProvider =
|
|
288
|
-
window["vue-plugin-hiprint"].defaultElementTypeProvider;
|
|
289
|
-
</script>
|
|
290
|
-
</body>
|
|
291
|
-
```
|
|
292
|
-
|
|
293
|
-
## 常见问题
|
|
294
|
-
|
|
295
|
-
> 打印重叠 / 样式问题
|
|
296
|
-
|
|
297
|
-
```javascript
|
|
298
|
-
/**
|
|
299
|
-
* 从 在index.html添加:
|
|
300
|
-
* <link rel="stylesheet" type="text/css" media="print" href="https://npmmirror.com/package/vue-plugin-hiprint/files/dist/print-lock.css">
|
|
301
|
-
* 或者
|
|
302
|
-
* <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
|
|
303
|
-
* 以处理打印所需css, 当然你也可以自行处理
|
|
304
|
-
* 比如： index.html目录下放一个print-lock.css, 然后在index.html添加:
|
|
305
|
-
* <link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">
|
|
306
|
-
*/
|
|
307
|
-
|
|
308
|
-
// 添加自定义样式
|
|
309
|
-
hiprintTemplate.print(
|
|
310
|
-
this.printData,
|
|
311
|
-
{},
|
|
312
|
-
{
|
|
313
|
-
styleHandler: () => {
|
|
314
|
-
// 这里拼接成放html->head标签内的css/style
|
|
315
|
-
// 1.例如：使用hiprin官网的样式
|
|
316
|
-
let css =
|
|
317
|
-
'<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
|
|
318
|
-
// 2.重写样式：所有文本红色
|
|
319
|
-
css += "<style>.hiprint-printElement-text{color:red !important;}</style>";
|
|
320
|
-
return css;
|
|
321
|
-
},
|
|
322
|
-
}
|
|
323
|
-
);
|
|
324
|
-
// 直接打印
|
|
325
|
-
hiprintTemplate.print2(this.printData, {
|
|
326
|
-
styleHandler: () => {
|
|
327
|
-
// 这里拼接成放html->head标签内的css/style
|
|
328
|
-
// 1.例如：使用hiprin官网的样式
|
|
329
|
-
let css =
|
|
330
|
-
'<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
|
|
331
|
-
// 2.重写样式：所有文本红色
|
|
332
|
-
css += "<style>.hiprint-printElement-text{color:red !important;}</style>";
|
|
333
|
-
return css;
|
|
334
|
-
},
|
|
335
|
-
});
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
> 取消自动 socket 连接 / socket 连接报错问题
|
|
339
|
-
|
|
340
|
-
```javascript
|
|
341
|
-
/**
|
|
342
|
-
* 取消自动连接
|
|
343
|
-
*/
|
|
344
|
-
// 在main.js中设置
|
|
345
|
-
import { hiPrintPlugin } from "vue-plugin-hiprint";
|
|
346
|
-
Vue.use(hiPrintPlugin, "$hiprint", false);
|
|
347
|
-
// hiPrintPlugin 同时提供了 disAutoConnect 方法
|
|
348
|
-
hiPrintPlugin.disAutoConnect();
|
|
349
|
-
// 在组件中使用 见： demo/design/index.vue
|
|
350
|
-
import { disAutoConnect, autoConnect, hiprint } from "vue-plugin-hiprint";
|
|
351
|
-
disAutoConnect();
|
|
352
|
-
// 同时 export了 autoConnect，disAutoConnect 方法
|
|
353
|
-
/**
|
|
354
|
-
* 连接回调及打印
|
|
355
|
-
*/
|
|
356
|
-
autoConnect((status, msg) => {
|
|
357
|
-
if (status) {
|
|
358
|
-
hiprintTemplate.print2(printData, {
|
|
359
|
-
printer: "",
|
|
360
|
-
title: "hiprint测试打印",
|
|
361
|
-
});
|
|
80
|
+
])
|
|
81
|
+
])
|
|
362
82
|
}
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
* socket连接报错？
|
|
366
|
-
* 由于npm包更新到socket.io 3.x版本，官网提供的客户端，npm包是无法连接的
|
|
367
|
-
* 请使用gitee提供的客户端, 同时gitee客户端可传更多的参数， 如是否打印颜色/打印份数/DPI等
|
|
368
|
-
* 详情electron见：https://www.electronjs.org/zh/docs/latest/api/web-contents
|
|
369
|
-
*/
|
|
370
|
-
```
|
|
371
|
-
|
|
372
|
-
> print/print2 打印回调
|
|
373
|
-
|
|
374
|
-
```javascript
|
|
375
|
-
// 浏览器预览打印, 无法监听是否点击了 打印/取消 按钮
|
|
376
|
-
hiprintTemplate.print(
|
|
377
|
-
this.printData,
|
|
378
|
-
{},
|
|
379
|
-
{
|
|
380
|
-
callback: () => {
|
|
381
|
-
console.log("浏览器打印窗口已打开");
|
|
382
|
-
},
|
|
383
|
-
}
|
|
384
|
-
);
|
|
385
|
-
// 直接打印
|
|
386
|
-
// 打印机名称: 通过 hiprintTemplate.getPrinterList() 获取 其中的 name
|
|
387
|
-
hiprintTemplate.print2(printData, { printer: "打印机名称", title: "打印标题" });
|
|
388
|
-
hiprintTemplate.on("printSuccess", function (data) {
|
|
389
|
-
console.log("打印完成");
|
|
390
|
-
});
|
|
391
|
-
hiprintTemplate.on("printError", function (data) {
|
|
392
|
-
console.log("打印失败");
|
|
393
|
-
});
|
|
83
|
+
return { addElementTypes }
|
|
84
|
+
}
|
|
394
85
|
```
|
|
395
86
|
|
|
396
|
-
|
|
87
|
+
注册：
|
|
397
88
|
|
|
398
|
-
|
|
89
|
+
```
|
|
90
|
+
import provider from './provider'
|
|
91
|
+
register({ plugins: [() => provider] })
|
|
92
|
+
```
|
|
399
93
|
|
|
400
|
-
|
|
94
|
+
### 连接客户端与直接打印
|
|
401
95
|
|
|
402
|
-
```js
|
|
403
|
-
hiprint.init({
|
|
404
|
-
lang: "en", // 设置语言 ['cn', 'en', 'de', 'es', 'fr', 'it', 'ja', 'ru', 'cn_tw']
|
|
405
|
-
});
|
|
406
96
|
```
|
|
97
|
+
import { hiprint, createPrintTemplate } from 'vg-print'
|
|
407
98
|
|
|
408
|
-
|
|
99
|
+
hiprint.init({ host: 'https://v4.printjs.cn:17521', token: 'hiprint-17521' })
|
|
409
100
|
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
host: "http://localhost:17521", // 可在此处设置连接地址与端口号
|
|
413
|
-
token: "token", // 可在此处设置连接 token 可缺省
|
|
414
|
-
});
|
|
101
|
+
const t = createPrintTemplate({ template })
|
|
102
|
+
t.print2({ name: '测试' }, { title: '标题', printer: 'HP LaserJet' })
|
|
415
103
|
```
|
|
416
104
|
|
|
417
|
-
|
|
105
|
+
`hiprint.hiwebSocket` 可读取打印机列表与客户端信息：
|
|
418
106
|
|
|
419
|
-
```
|
|
420
|
-
|
|
107
|
+
```
|
|
108
|
+
const list = hiprint.hiwebSocket.getPrinterList()
|
|
109
|
+
const opened = hiprint.hiwebSocket.opened
|
|
110
|
+
```
|
|
421
111
|
|
|
422
|
-
|
|
423
|
-
cd vue-plugin-hiprint && npm i
|
|
112
|
+
## Vue3 组件
|
|
424
113
|
|
|
425
|
-
|
|
426
|
-
|
|
114
|
+
```
|
|
115
|
+
import { Designer, Header, Preview, DragBox } from 'vg-print/vue3'
|
|
116
|
+
```
|
|
427
117
|
|
|
428
|
-
|
|
429
|
-
npm run build-demo
|
|
118
|
+
### Designer
|
|
430
119
|
|
|
431
|
-
|
|
432
|
-
npm run build
|
|
433
|
-
```
|
|
120
|
+
属性：`template`、`printData`、`templateKey`、`title`、`designOptions`、`autoConnect`、`paperList`、`config`、`plugins`、`authKey`
|
|
434
121
|
|
|
435
|
-
|
|
122
|
+
方法：`init(template)`、`getTarget()`、`getTemplateJson()`、`setTemplateJson(json)`、`exportJson()`
|
|
436
123
|
|
|
437
|
-
|
|
438
|
-
// 快速显示/隐藏 打印iframe 方便调试 ￣□￣｜｜
|
|
439
|
-
// 在浏览器控制台输入：
|
|
440
|
-
// 显示打印页面
|
|
441
|
-
$("#app").css("display", "none");
|
|
442
|
-
$("#hiwprint_iframe").css("visibility", "visible");
|
|
443
|
-
$("#hiwprint_iframe").css("width", "100%");
|
|
444
|
-
$("#hiwprint_iframe").css("height", "251.09mm"); // 这里替换个实际高度才能显示完
|
|
445
|
-
// 显示vue页面
|
|
446
|
-
$("#app").css("display", "block");
|
|
447
|
-
$("#hiwprint_iframe").css("visibility", "hidden");
|
|
448
|
-
```
|
|
124
|
+
插槽：`header`、`other`
|
|
449
125
|
|
|
450
|
-
|
|
126
|
+
示例：
|
|
451
127
|
|
|
452
|
-
|
|
128
|
+
```
|
|
129
|
+
<template>
|
|
130
|
+
<Designer :template="template" :config="config" :plugins="plugins">
|
|
131
|
+
<template #header>
|
|
132
|
+
<Header title="vg-print" />
|
|
133
|
+
</template>
|
|
134
|
+
</Designer>
|
|
135
|
+
<Preview ref="previewRef" />
|
|
136
|
+
<button @click="openPreview">预览</button>
|
|
137
|
+
<button @click="saveJson">导出JSON</button>
|
|
138
|
+
<button @click="loadJson">加载JSON</button>
|
|
139
|
+
<DragBox target="SVPrint" drag-key="tip" drag-style="width:160px;height:100px;left:20px;top:60px" :show="true">
|
|
140
|
+
<template #iconTitle>
|
|
141
|
+
<span>提示</span>
|
|
142
|
+
</template>
|
|
143
|
+
<template #body>
|
|
144
|
+
<div>自定义辅助区域</div>
|
|
145
|
+
</template>
|
|
146
|
+
</DragBox>
|
|
147
|
+
|
|
148
|
+
</template>
|
|
149
|
+
<script setup>
|
|
150
|
+
import { ref } from 'vue'
|
|
151
|
+
import { Designer, Header, Preview, DragBox } from 'vg-print/vue3'
|
|
152
|
+
import pluginEleBwip from '@vg-print/plugin-ele-bwip-js'
|
|
153
|
+
|
|
154
|
+
const template = ref({})
|
|
155
|
+
const config = ref({ showAdsorbLine: true, showPosition: true, showSizeBox: true })
|
|
156
|
+
const plugins = ref([pluginEleBwip({})])
|
|
157
|
+
const previewRef = ref(null)
|
|
158
|
+
|
|
159
|
+
function openPreview(){
|
|
160
|
+
const t = previewRef.value
|
|
161
|
+
const designerTarget = document.getElementById('SVPrint')
|
|
162
|
+
const printTemplate = t.getTarget() || null
|
|
163
|
+
// 若未手动设置，可从 Designer 暴露的方法获取模板实例
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
function saveJson(){
|
|
167
|
+
// 通过 Designer 暴露方法获取 json
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
function loadJson(){
|
|
171
|
+
// 设置新的模板 json
|
|
172
|
+
}
|
|
173
|
+
</script>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### Header
|
|
453
177
|
|
|
454
|
-
|
|
178
|
+
属性：`logoHtml`、`title`、`reEle`、`eleList`、`reMenu`、`menuList`、`onPreviewClick`
|
|
455
179
|
|
|
456
|
-
|
|
180
|
+
插槽：`headerLeft`、`headerCenter`、`headerRight`
|
|
457
181
|
|
|
458
|
-
|
|
182
|
+
示例：
|
|
459
183
|
|
|
460
|
-
|
|
184
|
+
```
|
|
185
|
+
<Header title="vg-print" :onPreviewClick="onPreviewClick" />
|
|
186
|
+
```
|
|
461
187
|
|
|
462
|
-
|
|
188
|
+
```
|
|
189
|
+
function onPreviewClick(e){
|
|
190
|
+
// 返回 true/false 控制是否阻止预览按钮默认行为
|
|
191
|
+
return true
|
|
192
|
+
}
|
|
193
|
+
```
|
|
463
194
|
|
|
464
|
-
|
|
195
|
+
### Preview
|
|
465
196
|
|
|
466
|
-
|
|
197
|
+
属性：`printTemplate`、`printData`、`printerList`、`selectedPrinter`、`showPdf`、`showImg`、`showPrint2`、`modalShow`
|
|
467
198
|
|
|
468
|
-
|
|
469
|
-
// js
|
|
470
|
-
window.open("hiprint://");
|
|
199
|
+
方法：`init(template, data)`、`show()`、`getTarget()`、`print()`、`directPrint()`、`toPdf(name, options)`、`toImage(options)`、`refreshPrinters()`
|
|
471
200
|
|
|
472
|
-
|
|
473
|
-
this.$alert(
|
|
474
|
-
`连接【${hiwebSocket.host}】失败！<br>请确保目标服务器已<a href="https://gitee.com/CcSimple/electron-hiprint/releases" target="_blank"> 下载 </a> 并 <a href="hiprint://" target="_blank"> 运行 </a> 打印服务！`,
|
|
475
|
-
"客户端未连接",
|
|
476
|
-
{ dangerouslyUseHtmlString: true }
|
|
477
|
-
);
|
|
201
|
+
示例：
|
|
478
202
|
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
target="_blank"
|
|
490
|
-
>
|
|
491
|
-
下载
|
|
492
|
-
</a>并<a href="hiprint://" target="_blank">
|
|
493
|
-
运行
|
|
494
|
-
</a>
|
|
495
|
-
打印服务！
|
|
496
|
-
</div>
|
|
497
|
-
),
|
|
498
|
-
});
|
|
203
|
+
```
|
|
204
|
+
<Preview ref="previewRef" :modalShow="modalShow" />
|
|
205
|
+
|
|
206
|
+
// 代码调用
|
|
207
|
+
previewRef.value.init(templateJson, { name: '预览数据' })
|
|
208
|
+
previewRef.value.show()
|
|
209
|
+
previewRef.value.print()
|
|
210
|
+
previewRef.value.toPdf('文件名')
|
|
211
|
+
previewRef.value.toImage({ type: 'image/jpeg', pixelRatio: 2 })
|
|
212
|
+
previewRef.value.refreshPrinters()
|
|
499
213
|
```
|
|
500
214
|
|
|
501
|
-
|
|
215
|
+
### DragBox
|
|
502
216
|
|
|
503
|
-
|
|
217
|
+
属性：`target`、`dragKey`、`dragStyle`、`mode`、`show`
|
|
504
218
|
|
|
505
|
-
|
|
219
|
+
插槽：`iconTitle`、`body`
|
|
506
220
|
|
|
507
|
-
|
|
508
|
-
import { hiprint } from "vue-plugin-hiprint";
|
|
221
|
+
示例：
|
|
509
222
|
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
223
|
+
```
|
|
224
|
+
<DragBox target="SVPrint" drag-key="demo" drag-style="width:200px;height:200px;left:238px;top:95px" :show="true">
|
|
225
|
+
<template #iconTitle>
|
|
226
|
+
<span>自定义拖拽框</span>
|
|
227
|
+
</template>
|
|
228
|
+
<template #body>
|
|
229
|
+
<div>内容</div>
|
|
230
|
+
</template>
|
|
231
|
+
</DragBox>
|
|
232
|
+
```
|
|
514
233
|
|
|
515
|
-
|
|
234
|
+
## 使用示例
|
|
516
235
|
|
|
517
|
-
hiwebSocket.setHost("https://printjs.cn:17521", "vue-plugin-hiprint");
|
|
518
236
|
```
|
|
237
|
+
import { register, createPrintTemplate } from 'vg-print'
|
|
238
|
+
import pluginEleBwip from '@vg-print/plugin-ele-bwip-js'
|
|
519
239
|
|
|
520
|
-
|
|
240
|
+
register({ plugins: [pluginEleBwip({})] })
|
|
241
|
+
const t = createPrintTemplate({ template })
|
|
242
|
+
t.print(data)
|
|
243
|
+
```
|
|
521
244
|
|
|
522
|
-
|
|
245
|
+
```
|
|
246
|
+
import { Designer, Header, Preview } from 'vg-print/vue3'
|
|
247
|
+
```
|
|
523
248
|
|
|
524
|
-
|
|
525
|
-
2. print2、ippRequest、ippRequest api options 中需要添加 `client` 指定客户端
|
|
249
|
+
## 选项与参数对齐
|
|
526
250
|
|
|
527
|
-
|
|
251
|
+
- 设计器 `designOptions`：`{ grid: true, activePanel: true }`
|
|
252
|
+
- 配置 `config`：`showAdsorbLine`、`showPosition`、`showSizeBox` 等在渲染前设置（与站点一致）
|
|
253
|
+
- 纸张列表 `paperList`：传入 `{ type, width, height }[]` 控制常用纸张
|
|
254
|
+
- 插件 `plugins`：函数数组，返回 provider 并向 `hiprint` 注册元素分组
|
|
255
|
+
- 授权 `authKey`：保留参数位
|
|
528
256
|
|
|
529
|
-
|
|
530
|
-
var clientId = "AlBaUCNs3AIMFPLZAAAh";
|
|
531
|
-
var client = hiwebSocket.clients[clientId];
|
|
532
|
-
var printer = hiwebSocket.printerList[0];
|
|
257
|
+
## 客户端与打印机
|
|
533
258
|
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
title: "hiprint测试打印",
|
|
538
|
-
});
|
|
259
|
+
```
|
|
260
|
+
import { hiprint } from 'vg-print'
|
|
261
|
+
hiprint.init({ host: 'https://v4.printjs.cn:17521', token: 'hiprint-17521' })
|
|
539
262
|
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
title: "hiprint测试打印",
|
|
544
|
-
});
|
|
545
|
-
```
|
|
263
|
+
const printers = hiprint.hiwebSocket.getPrinterList()
|
|
264
|
+
const opened = hiprint.hiwebSocket.opened
|
|
265
|
+
```
|
|
546
266
|
|
|
547
|
-
|
|
267
|
+
`print2` 传入 `options.printer` 指定打印机；如存在多客户端场景，结合 `client` 信息传入。
|
|
548
268
|
|
|
549
|
-
##
|
|
269
|
+
## 源码位置参考
|
|
550
270
|
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
| *hiprint-transit-java | [github](https://github.com/weaponready/hiprint-transit-java) | - | web 与客户端中转服务 Java 实现 |
|
|
557
|
-
| *uni-app-hiprint | [github](https://github.com/Xavier9896/uni-app-hiprint) | - | uni-app 项目通过 webview 使用 vue-plugin-hiprint demo |
|
|
558
|
-
| *node-hiprint-pdf | [github](https://github.com/CcSimple/node-hiprint-pdf) | - | 提供通过 node 对 vue-plugin-hiprint 模板生成 矢量 pdf、image、html |
|
|
559
|
-
| *iboot-print | [github](https://github.com/anganing/iboot-print) | - | 提供通过 java HtmlUnit 对 vue-plugin-hiprint 模板生成 html（image、pdf待实现） |
|
|
271
|
+
- 入口与核心导出：`src/index.js:88-128`
|
|
272
|
+
- 预览组件：`src/vue3/Preview.vue:1-63`
|
|
273
|
+
- 设计器组件：`src/vue3/Designer.vue:1-42`
|
|
274
|
+
- 头部组件：`src/vue3/Header.vue:1-38`
|
|
275
|
+
- 拖拽组件：`src/vue3/DragBox.vue:1-28`
|
|
560
276
|
|
|
561
|
-
|
|
277
|
+
## 方法使用案例集合
|
|
562
278
|
|
|
563
|
-
|
|
279
|
+
### 注册与 Provider 插件
|
|
564
280
|
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
281
|
+
```
|
|
282
|
+
import { register } from 'vg-print'
|
|
283
|
+
import pluginEleBwip from '@vg-print/plugin-ele-bwip-js'
|
|
284
|
+
|
|
285
|
+
register({
|
|
286
|
+
authKey: '',
|
|
287
|
+
plugins: [
|
|
288
|
+
pluginEleBwip({ /* 插件参数 */ })
|
|
289
|
+
]
|
|
290
|
+
})
|
|
291
|
+
```
|
|
571
292
|
|
|
572
|
-
|
|
293
|
+
### 全局配置 setConfig
|
|
573
294
|
|
|
574
|
-
|
|
295
|
+
```
|
|
296
|
+
import { setConfig } from 'vg-print'
|
|
575
297
|
|
|
576
|
-
|
|
298
|
+
setConfig({
|
|
299
|
+
showAdsorbLine: true,
|
|
300
|
+
showPosition: true,
|
|
301
|
+
showSizeBox: true
|
|
302
|
+
})
|
|
303
|
+
```
|
|
577
304
|
|
|
578
|
-
|
|
579
|
-
<tr>
|
|
580
|
-
<td><img height="180" src="https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/zWechat.png"/></td>
|
|
581
|
-
<td><img height="180" src="https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/zAlipay.png"/></td>
|
|
582
|
-
</tr>
|
|
583
|
-
</table>
|
|
305
|
+
### 设计器渲染与获取模板
|
|
584
306
|
|
|
585
|
-
|
|
307
|
+
```
|
|
308
|
+
import { createPrintTemplate } from 'vg-print'
|
|
586
309
|
|
|
587
|
-
|
|
310
|
+
const t = createPrintTemplate({ template: templateJson })
|
|
311
|
+
t.design('#SVPrint', { grid: true })
|
|
312
|
+
const html = t.getHtml(printData) // 参考 src/views/preview.vue:95-101
|
|
313
|
+
const json = t.getJson() // 参考 src/views/index.vue:882
|
|
314
|
+
```
|
|
588
315
|
|
|
589
|
-
|
|
316
|
+
### 设置与导出模板 JSON
|
|
590
317
|
|
|
591
|
-
|
|
318
|
+
```
|
|
319
|
+
t.setJson(newJson)
|
|
320
|
+
const exported = t.getJson()
|
|
321
|
+
```
|
|
592
322
|
|
|
593
|
-
|
|
323
|
+
### 浏览器打印
|
|
594
324
|
|
|
595
|
-
|
|
325
|
+
```
|
|
326
|
+
t.print(printData, { /* options */ })
|
|
327
|
+
```
|
|
596
328
|
|
|
597
|
-
|
|
329
|
+
### 直接打印（需客户端）
|
|
598
330
|
|
|
599
|
-
|
|
331
|
+
```
|
|
332
|
+
t.print2(printData, {
|
|
333
|
+
title: '打印标题',
|
|
334
|
+
printer: 'HP LaserJet'
|
|
335
|
+
})
|
|
336
|
+
// 判断连接与读取打印机列表
|
|
337
|
+
hiprint.hiwebSocket.opened // 参考 src/views/preview.vue:59-66
|
|
338
|
+
const printers = hiprint.hiwebSocket.getPrinterList() // 参考 src/hiprint/hiprint.bundle.js:7779
|
|
339
|
+
```
|
|
600
340
|
|
|
601
|
-
|
|
341
|
+
### 导出 PDF（两类模式）
|
|
602
342
|
|
|
603
|
-
|
|
343
|
+
1) 普通模板，导出预览全部页：
|
|
604
344
|
|
|
605
|
-
|
|
345
|
+
```
|
|
346
|
+
t.toPdf(printData, '打印预览pdf')
|
|
347
|
+
```
|
|
606
348
|
|
|
607
|
-
|
|
349
|
+
2) 小模板 A4 排版（把小模板排到 A4）参考 `src/views/index.vue:704-744`：
|
|
608
350
|
|
|
609
|
-
|
|
610
|
-
|
|
351
|
+
```
|
|
352
|
+
t.toPdf(printData, '打印预览pdf', {
|
|
353
|
+
paperWidth: 210,
|
|
354
|
+
paperHeight: 297,
|
|
355
|
+
onProgress: (cur, total) => console.log('toPdf 进度', Math.floor((cur/total)*100))
|
|
356
|
+
})
|
|
357
|
+
```
|
|
611
358
|
|
|
612
|
-
|
|
359
|
+
### 导出图片（多页合成、清晰度、排版）
|
|
613
360
|
|
|
614
361
|
```
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
362
|
+
// 多张图片，每张合成 6 页，自动下载 JPEG（参考 src/views/index.vue:704-744）
|
|
363
|
+
await t.toImage(printData, {
|
|
364
|
+
limit: 6,
|
|
365
|
+
isDownload: true,
|
|
366
|
+
name: 'A4排版',
|
|
367
|
+
type: 'image/jpeg',
|
|
368
|
+
pixelRatio: 2,
|
|
369
|
+
quality: 0.8,
|
|
370
|
+
paperWidth: 210,
|
|
371
|
+
paperHeight: 297,
|
|
372
|
+
toType: 'url'
|
|
373
|
+
})
|
|
624
374
|
```
|
|
625
375
|
|
|
626
|
-
|
|
376
|
+
### 客户端高级 API（选用）
|
|
627
377
|
|
|
628
378
|
```
|
|
629
|
-
|
|
379
|
+
// 刷新打印机列表
|
|
380
|
+
hiprint.hiwebSocket.refreshPrinterList() // 参考 src/hiprint/hiprint.bundle.js:7782
|
|
630
381
|
|
|
631
|
-
|
|
382
|
+
// 获取客户端列表与信息
|
|
383
|
+
hiprint.hiwebSocket.getClients() // 参考 src/hiprint/hiprint.bundle.js:7789
|
|
384
|
+
hiprint.hiwebSocket.getClientInfo() // 参考 src/hiprint/hiprint.bundle.js:12551-12554
|
|
632
385
|
|
|
633
|
-
|
|
386
|
+
// IPP 打印与请求
|
|
387
|
+
hiprint.hiwebSocket.ippPrint({ /* options */ }) // 参考 src/hiprint/hiprint.bundle.js:7803
|
|
388
|
+
hiprint.hiwebSocket.ippRequest({ /* options */ }) // 参考 src/hiprint/hiprint.bundle.js:7810
|
|
389
|
+
```
|
|
634
390
|
|
|
635
|
-
|
|
391
|
+
### Vue 插件全局快捷：$print / $print2
|
|
636
392
|
|
|
637
|
-
|
|
393
|
+
```
|
|
394
|
+
// main.js
|
|
395
|
+
import { createApp } from 'vue'
|
|
396
|
+
import App from './App.vue'
|
|
397
|
+
import { hiPrintPlugin } from 'vg-print'
|
|
398
|
+
|
|
399
|
+
const app = createApp(App)
|
|
400
|
+
app.use(hiPrintPlugin) // 全局挂载 this.$print / this.$print2 参考 src/index.js:34-75
|
|
401
|
+
app.mount('#app')
|
|
402
|
+
|
|
403
|
+
// 组件中使用
|
|
404
|
+
this.$print(undefined, templateJson, printData, options)
|
|
405
|
+
this.$print2(undefined, templateJson, printData, options)
|
|
638
406
|
```
|