01. 🌈 新增支持 添加 selectElementsByField 属性，通过传入field的字符串数组选中文本类型的元素
- + +@xiaolonggee ([#123](https://github.com/CcSimple/vue-plugin-hiprint/pull/123)) ```js hiprintTemplate.selectElementsByField(['name']) ``` @@ -34,7 +257,7 @@01. ✨ 调整优化 text、barcode 类型条码自动增加宽度优化
经过一段时间的测试及实验，找到了 [JsBarcode](https://github.com/lindell/JsBarcode) 与 [bwip-js](https://github.com/metafloor/bwip-js) 两个库实现条码宽度自动增加的较优方案。（感谢Q群用户 【︶ㄣ夏＾熟 。】的测试） - + 现在你可以在 text[textType='barcode']、barCode 元素中设置 barAutoWidth 属性，使条码以渲染时 svg 提供的最小尺寸自动增加宽度。 > 0.0.57-beta20 版本中 条码宽度 = svg宽度 * 1.2，该倍率不是很合理，在此版本中修改为 1.05 @@ -78,7 +301,7 @@01. 🌈 新增支持 获取打印机纸张信息 Beta ❗️
- + 当客户端运行在 window 系统环境时可以获取打印机纸张信息，你需要自行拉取最新客户端代码[electron-hiprint](https://github.com/CcSimple/electron-hiprint)，自行构建最新版本(v1.0.10) > ❗️ node-hiprint-transit 中转暂未添加支持 @@ -185,7 +408,7 @@ const template = new hiprint.PrintTemplate({ template: panel, }) - + template.selectAllElements() ```[✨ 国内访问(www.ibujian.cn)](https://www.ibujian.cn/)
[🌈 更新日志 (页面支持 Ctrl + F 搜索)](CHANGELOG.md)
[🐛 常见问题(入门必看!)](#常见问题) ⚠️⚠️ [📕 系列教程文章(入门必看!)](#文章链接)
[🚀 项目生态(打印客户端、node 服务端、uniapp)](#插件生态) -## 注意事项!! +> hiprint for Vue2.x / Vue3.x (基于 jQuery, 理论上其他框架可用。[react demo 分支](https://github.com/CcSimple/vue-plugin-hiprint/tree/react_demo)) -- NodeJs 需要 16.x 版本 (开发使用的 16.18.1) --
【vue-plugin-hiprint】与【hiprint.io官网】差异甚多,请忽混用!请忽混用!请忽混用!
-- 请使用我提供的打印客户端,或者自行修改打印客户端的源码,以适配本项目的模板!
-- 主分支是融合版本的最新代码,如果你不需要修改 hiprint 相关代码. 请使用 npm 包的方式安装.
-- 使用直接客户端时,本地开发连接没问题,部署到线上出现跨域无法连接打印客户端问题:
-- [线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html](https://www.cnblogs.com/daysme/p/15493523.html)
-- 如需提交 PR 请前往 github 合并后可自动发布npm包并同步代码到 gitee
-- vue-plugin-hiprint 包不包含UI界面,需要自行处理。如果想更快速引入请查看 [sv-print组件库](https://ccsimple.github.io/sv-print-docs/)
+> **jQuery/uniapp (html/h5)** 项目 见下方 [jQuery/uniapp 项目使用](#jqueryuniapp-项目使用)
-## 快速链接
-
-Demo预览：[https://ccsimple.gitee.io/vue-plugin-hiprint/](https://ccsimple.gitee.io/vue-plugin-hiprint/)(已挂，恢复看gitee官方情况)
-
-Github Demo预览：[https://ccsimple.github.io/vue-plugin-hiprint/](https://ccsimple.github.io/vue-plugin-hiprint/)(慢，请墙)
-
-更新记录：[npm包版本及更新记录](CHANGELOG.md)
-
-打印客户端：[https://gitee.com/CcSimple/electron-hiprint](https://gitee.com/CcSimple/electron-hiprint)
-
-中转服务：[https://github.com/Xavier9896/node-hiprint-transit](https://github.com/Xavier9896/node-hiprint-transit)
+> [!IMPORTANT]
+>
+> **注意事项**
+>
+> - NodeJs 需要 16.x 版本 (开发使用 16.18.1)
+> - 【vue-plugin-hiprint】与【hiprint.io官网】差异甚多,请忽混用!请忽混用!请忽混用!
+> - 请使用项目关联的打印客户端,或者自行修改打印客户端的源码,以适配本项目的模板!
+> - 主分支是融合版本的最新代码,如果你不需要修改 hiprint 相关代码. 请使用 npm 包的方式安装.
+> - 使用直接客户端时,本地开发连接没问题,部署到线上出现跨域无法连接打印客户端问题:
+> - [线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html](https://www.cnblogs.com/daysme/p/15493523.html)
+> - 如需提交 PR 请前往 github 合并后可自动发布 npm 包并同步代码到 gitee
+> - vue-plugin-hiprint 包不包含 UI 界面,需要自行处理。如果想更快速引入请查看 [sv-print 组件库](https://www.ibujian.cn/svp/)
## 文章链接
-入门篇: [【vue-plugin-hiprint】使用-入门篇](https://mp.weixin.qq.com/s/4N4f7CkxodA-fuTJ_FbkOQ)
-
-进阶篇: [【vue-plugin-hiprint】使用-进阶篇](https://mp.weixin.qq.com/s/LYZP2iqV0gy4m76mttplAw)
-
-provider: [【vue-plugin-hiprint】如何自定义可拖拽元素 provider](https://mp.weixin.qq.com/s/n9i1j8hhVJvnlfJRPRtWog)
-
-打印篇: [【vue-plugin-hiprint】使用-打印篇](https://mp.weixin.qq.com/s/P-Zz8YfELmRNi4EuED4QmA)
+2元快速入门: [一文彻底入门可视化打印 vue-plugin-hiprint](https://mp.weixin.qq.com/s/R8juiaQsLhMmyZebv55tUA)
-参数篇: [【vue-plugin-hiprint】使用-参数篇](https://mp.weixin.qq.com/s/vfgSG62tAXn7Ot7y3x68fw)
+6元解锁云打印: [三端通用的云打印方案: uniapp + nodejs中转服务！(附源码)](https://mp.weixin.qq.com/s/3_zEsr6nIYAqKdDsKqhg7A)
-实战动态provider: [【vue-plugin-hiprint】实战-动态provider](https://mp.weixin.qq.com/s/UVkhul1tynjaUjdC_NaHfw)
+> 更多文章见公众号、小程序(文章,服务端预览,云打印)
-实战动态模板: [【vue-plugin-hiprint】实战-动态模板](https://mp.weixin.qq.com/s/JXXC9Fyy_PgPXrwh1mDBTQ)
-
-常见问题汇总①: [【vue-plugin-hiprint】常见问题汇总①](https://mp.weixin.qq.com/s/E-ZfuKLH3-GvKn4AosRvaw)
-
-常见问题汇总②: [【vue-plugin-hiprint】常见问题汇总②](https://mp.weixin.qq.com/s/UEnr24bB_P6KmpZ7iZmYvA)
-
-常见问题汇总③: [【vue-plugin-hiprint】常见问题汇总③](https://mp.weixin.qq.com/s/lRimQ-cjuwN3mg6RicPyag)
-
-## 更多参数的文档请仔细查阅文档
-
-hiprint官方文档：[http://hiprint.io/docs/start](http://hiprint.io/docs/start)
-
-本人写的部分文档: [https://ccsimple.gitee.io/sv-print-docs/config/hiprint.html](https://ccsimple.gitee.io/sv-print-docs/config/hiprint.html)
+ |
+  |
+
 |
@@ -113,20 +107,20 @@ npm install vue-plugin-hiprint
如果使用npm包或者本项目,请使用如下样子的直接打印客户端
-
+## 配套直接打印客户端[electron-hiprint](https://gitee.com/CcSimple/electron-hiprint)
-
+### [electron-hiprint api](./apiDoc.md)
-
-本项目需要上面样式的直接打印客户端; 下载地址:
+> 使用本项目,请使用如下样子的直接打印客户端
+
+支持 win、mac、linux 系统
-> [https://gitee.com/CcSimple/electron-hiprint/releases](https://gitee.com/CcSimple/electron-hiprint/releases)
+> [国内 Gitee 下载](https://gitee.com/CcSimple/electron-hiprint/releases) [Github 下载](https://github.com/CcSimple/electron-hiprint/releases) + + ### URLScheme `hiprint://` + > 安装客户端时请 `以管理员身份运行` ，才能成功添加 URLScheme 使用：浏览器地址栏输入 `hiprint://` 并回车 @@ -321,10 +494,14 @@ hiprintTemplate.print2({}); ```js // js -window.open("hiprint://") +window.open("hiprint://"); // element-ui -this.$alert(`连接【${hiwebSocket.host}】失败！
请确保目标服务器已 下载 并 运行 打印服务！`, "客户端未连接", {dangerouslyUseHtmlString: true}) +this.$alert( + `连接【${hiwebSocket.host}】失败！
请确保目标服务器已 下载 并 运行 打印服务！`, + "客户端未连接", + { dangerouslyUseHtmlString: true } +); // ant-design this.$error({ @@ -339,9 +516,7 @@ this.$error({ target="_blank" > 下载 - - 并 - + 并 运行 打印服务！ @@ -357,16 +532,16 @@ this.$error({ 连接中转服务只需要修改 host， 添加 token ```js -import { hiprint } from 'vue-plugin-hiprint' +import { hiprint } from "vue-plugin-hiprint"; hiprint.init({ - host: 'https://printjs.cn:17521/', // 此处输入服务启动后的地址 - token: 'vue-plugin-hiprint', // 用于鉴权的token + host: "https://v4.printjs.cn:17521/", // 此处输入服务启动后的地址 + token: "hiprint-17521", // 用于鉴权的token，hiprint* （*可替换为[0-9a-zA-Z\-_]字符） }); // or -hiwebSocket.setHost("https://printjs.cn:17521/", "vue-plugin-hiprint") +hiwebSocket.setHost("https://printjs.cn:17521/", "vue-plugin-hiprint"); ``` 具体使用请转至 [node-hiprint-transit](https://github.com/Xavier9896/node-hiprint-transit) @@ -376,220 +551,94 @@ hiwebSocket.setHost("https://printjs.cn:17521/", "vue-plugin-hiprint") 1. 你可以从 `hiwebSocket` 中获取到 `clients`、`printerList` ，里面都将包含 `client` 信息 2. print2、ippRequest、ippRequest api options 中需要添加 `client` 指定客户端 - eg: - ```js - var clientId = "AlBaUCNs3AIMFPLZAAAh" - var client = hiwebSocket.clients[clientId] - var printer = hiwebSocket.printerList[0] + eg: - hiprintTemplate.print2(printData, { client: clientId, printer: client.printerList[n].name, title: 'hiprint测试打印' }); + ```js + var clientId = "AlBaUCNs3AIMFPLZAAAh"; + var client = hiwebSocket.clients[clientId]; + var printer = hiwebSocket.printerList[0]; - hiprintTemplate.print2(printData, { client: printer.clientId, printer: printer.name, title: 'hiprint测试打印' }); - ``` - > 如果你不提供 client 中转服务将抛出一个 error + hiprintTemplate.print2(printData, { + client: clientId, + printer: client.printerList[n].name, + title: "hiprint测试打印", + }); -## 常见问题 + hiprintTemplate.print2(printData, { + client: printer.clientId, + printer: printer.name, + title: "hiprint测试打印", + }); + ``` -> 可能花几分钟读一读下面的文章就能找到你遇到的问题: + > 如果你不提供 client 中转服务将抛出一个 error -常见问题汇总①: [【vue-plugin-hiprint】常见问题汇总①](https://mp.weixin.qq.com/s/E-ZfuKLH3-GvKn4AosRvaw) +## 插件生态 -常见问题汇总②: [【vue-plugin-hiprint】常见问题汇总②](https://mp.weixin.qq.com/s/UEnr24bB_P6KmpZ7iZmYvA) +| 项目名称 | 项目地址 | 下载地址 | 描述 | +| ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------------------------ | +| vue-plugin-hiprint | [github](https://github.com/CcSimple/vue-plugin-hiprint)、[gitee](https://gitee.com/CcSimple/vue-plugin-hiprint) | [npm](https://www.npmjs.com/package/vue-plugin-hiprint) | 打印设计器 | +| electron-hiprint | [github](https://github.com/CcSimple/electron-hiprint)、[gitee](https://gitee.com/CcSimple/electron-hiprint) | [releases](https://github.com/CcSimple/electron-hiprint/releases) | 直接打印客户端 | +| node-hiprint-transit | [github](https://github.com/Xavier9896/node-hiprint-transit)、[gitee](https://gitee.com/Xavier9896/node-hiprint-transit) | [releases](https://github.com/Xavier9896/node-hiprint-transit/releases) | web 与客户端中转服务 Node 实现 | +| hiprint-transporter-java | [github](https://github.com/LyingDoc/hiprint-transit-java)、[gitee](https://gitee.com/dut_cc/hiprint-transporter-java) | - | web 与客户端中转服务 Java 实现 | +| hiprint-transit-java | [github](https://github.com/weaponready/hiprint-transit-java) | - | web 与客户端中转服务 Java 实现 | +| uni-app-hiprint | [github](https://github.com/Xavier9896/uni-app-hiprint) | - | uni-app 项目通过 webview 使用 vue-plugin-hiprint demo | +| node-hiprint-pdf | [github](https://github.com/CcSimple/node-hiprint-pdf) | - | 提供通过 node 对 vue-plugin-hiprint 模板生成 矢量 pdf、image、html | -常见问题汇总③: [【vue-plugin-hiprint】常见问题汇总③](https://mp.weixin.qq.com/s/lRimQ-cjuwN3mg6RicPyag) -> design时怎么修改默认图片？ -```vue - - - - - -``` -> print/print2 打印回调 -```javascript -// 浏览器预览打印 -hiprintTemplate.print(this.printData, {}, { - callback: () => { - console.log('浏览器打印窗口已打开') - } -}) -// 直接打印 -// 打印机名称: 通过 hiprintTemplate.getPrinterList() 获取 其中的 name -hiprintTemplate.print2(printData, {printer: '打印机名称', title: '打印标题'}) -hiprintTemplate.on('printSuccess', function (data) { - console.log('打印完成') -}) -hiprintTemplate.on('printError', function (data) { - console.log('打印失败') -}) -``` -> 打印重叠 / 样式问题 -```javascript -/** - * 从 0.0.19 起, 在index.html添加: - * - * 以处理打印所需css, 当然你也可以自行处理 - * 比如： index.html目录下放一个print-lock.css, 然后在index.html添加: - * - */ - -// 添加自定义样式 -hiprintTemplate.print(this.printData, {}, { - styleHandler: () => { - // 这里拼接成放html->head标签内的css/style - // 1.例如：使用hiprin官网的样式 - let css = '' - // 2.重写样式：所有文本红色 - css += '' - return css - } -}) -// 直接打印 -hiprintTemplate.print2(this.printData, { - styleHandler: () => { - // 这里拼接成放html->head标签内的css/style - // 1.例如：使用hiprin官网的样式 - let css = '' - // 2.重写样式：所有文本红色 - css += '' - return css - } -}) -``` -> 修改默认配置 / 显示/隐藏元素设置参数 -```javascript -// 0.0.13， 新增setConfig方法 -// 还原配置 -hiprint.setConfig() -// 替换配置 -hiprint.setConfig({ - movingDistance: 2.5, - text:{ - supportOptions: [ - { - name: 'styler', - hidden: true - }, - { - name: 'formatter', - hidden: true - }, - ] - } -}) -``` -> 取消自动socket连接 / socket连接报错问题 -```javascript -/** - * 取消自动连接 - */ -// 在main.js中设置 -import {hiPrintPlugin} from 'vue-plugin-hiprint' -Vue.use(hiPrintPlugin,'$hiprint', false); -// hiPrintPlugin 同时提供了 disAutoConnect 方法 -hiPrintPlugin.disAutoConnect(); -// 在组件中使用 见： demo/design/index.vue -import {disAutoConnect, autoConnect, hiprint} from 'vue-plugin-hiprint' -disAutoConnect(); -// 同时 export了 autoConnect，disAutoConnect 方法 -/** - * 连接回调及打印 - */ -autoConnect((status,msg) => { - if (status) { - hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试打印'}); - } -}); -/** - * socket连接报错？ - * 由于npm包更新到socket.io 3.x版本，官网提供的客户端，npm包是无法连接的 - * 请使用gitee提供的客户端, 同时gitee客户端可传更多的参数， 如是否打印颜色/打印份数/DPI等 - * 详情electron见：https://www.electronjs.org/zh/docs/latest/api/web-contents - */ -``` - -## 参与项目 -```console -git clone https://gitee.com/CcSimple/vue-plugin-hiprint.git -// init -cd vue-plugin-hiprint -npm i -// 调试预览 -npm run serve -// 打包 -npm run build -``` -## demo调试（显示打印iframe） -```javascript -// 快速显示/隐藏 打印iframe 方便调试 ￣□￣｜｜ -// 在浏览器控制台输入： -// 显示打印页面 -$('#app').css('display','none'); -$('#hiwprint_iframe').css('visibility','visible'); -$('#hiwprint_iframe').css('width','100%'); -$('#hiwprint_iframe').css('height','251.09mm'); // 这里替换个实际高度才能显示完 -// 显示vue页面 -$('#app').css('display','block'); -$('#hiwprint_iframe').css('visibility','hidden'); -``` +> 带 * 项目为周边社区维护项目，更新迭代、兼容性、稳定性无法得到保证。 ## 交流群 +
 |
-  |
+ |
+ |
 |
-  |
+ |
+ |
开发
+## Star History
+
+[](https://star-history.com/#CcSimple/vue-plugin-hiprint&Date)
+
## 分支说明
-> main： vue2.x + ant1.7.x融合版 及 npm包源代码
-> npm_demo： vue2.x + ant1.7.x + npm包使用 示例
+> main： vue2.x + ant1.7.x 融合版 及 npm 包源代码
+
+> npm_demo： vue2.x + ant1.7.x + npm 包使用 示例
-> npm_demo_ele： vue2.x + ElementUi 2.x + npm包使用 示例
+> npm_demo_ele： vue2.x + ElementUi 2.x + npm 包使用 示例
-> npm_demo_v3： vue3.x + vite + npm包(0.0.18)使用 示例
+> npm_demo_v3： vue3.x + vite + npm 包(0.0.18)使用 示例
## 关于如何融合处理
+
> 自己融合请查看 vue.config.js 对比 hiprint.bundle.js
-> webpack.config.js，是npm打包需要处理的
+> webpack.config.js，是 npm 打包需要处理的
## 开源使用说明
-> npm包是基于hiprint官网2.5.4版本基础做的调整及优化;+ +> npm 包是基于 hiprint 官网 2.5.4 版本基础做的调整及优化;
> 本人对开源协议理解有限,如有侵权不合理的地方,请联系告知我;
hiprint 开源协议如下: + ``` /** * jQuery Hiprint 2.5.4 @@ -602,7 +651,7 @@ hiprint 开源协议如下: */ ``` -## 关于LGPL协议 +## 关于 LGPL 协议 ``` LGPL是GPL的一个为主要为类库使用设计的开源协议。和GPL要求任何使用/修改/衍生之GPL类库的的软件必须采用GPL协议不同。 diff --git a/apiDoc.md b/apiDoc.md new file mode 100644 index 00000000..193d78cd --- /dev/null +++ b/apiDoc.md @@ -0,0 +1,506 @@ +# 连接客户端、中转文档 + +## 1. 连接客户端或中转 + +### 1.1 hiprint init 时入参 `host`、`token` + +```js +hiprint.init({ + ...otherOptions, + host: "http://localhost:17521/", // 桌面客户端地址 + token: "vue-plugin-hiprint", // 客户端设置的令牌 +}); +``` + +### 1.2 调用 hiwebsocket 提供的 api + +```js +hiwebSocket.setHost( + "http://localhost:17521/", + "vue-plugin-hiprint", + // callback + (connect) => { + if (connect) { + console.log("连接成功"); + // do something after connected + } else { + console.log("连接失败"); + } + } +); +``` + +### 1.3 连接中转服务器 + +```js +hiprint.init({ + ...otherOptions, + host: "https://v5.printjs.cn:17521/", // 桌面客户端地址 + token: "hiprint-17521", // 中转服务器设置的令牌 +}); + +// OR + +hiwebSocket.setHost( + "https://v5.printjs.cn:17521/", + "hiprint-17521", + // callback + (connect) => { + if (connect) { + console.log("连接成功"); + // do something after connected + } else { + console.log("连接失败"); + } + } +); +``` + +> [!TIP] +> 如果你使用公益中转服务器 [v5.printjs.cn:17521](https://github.com/Xavier9896/node-hiprint-transit#%E5%85%8D%E8%B4%B9%E6%9C%8D%E5%8A%A1-%E7%94%A8%E7%88%B1%E5%8F%91%E7%94%B5) `token` 支持通配符，请设置一个唯一的 `token` +> +> `hiprint-test-1`、`hiprint-17521`、`hiprint_10086`。 +> +> 更多中转相关信息请查看 [node-hiprint-transit](https://github.com/Xavier9896/node-hiprint-transit) 文档 + +## 2. 获取客户端或中转信息 + +### 2.1 直连客户端 + +#### 2.1.1 获取客户端信息 clientInfo + +连接成功后客户端会主动发送客户端信息到 web。 + +```js +// 连接成功的情况下从 hiwebSocket 获取客户端信息 +if (hiwebSocket.opened) { + console.log("客户端信息：", hiwebSocket.clientInfo); +} +``` + +
+
+
+调用 api 获取最新的客户端信息
+
+> [!TIP]
+> 基本上无需调用该 API，客户端修改配置、重启会重新连接，直接从 `hiwebSocket.clientInfo` 获取即可，如果你确实需要也可以手动调用
+
+```js
+hiprint.getClientInfo((clientInfo) => {
+ console.log("最新客户端信息：", clientInfo);
+});
+// OR
+hiwebSocket.getClientInfo();
+hinnn.event.on("clientInfo", (clientInfo) => {
+ console.log("最新客户端信息：", clientInfo);
+});
+```
+
+#### 2.1.2 直连客户端，获取打印机列表 printerList
+
+连接成功后客户端会主动发送打印机列表到 web。
+
+```js
+// 在连接成功的情况下从 hiwebSocket 获取打印机列表
+if (hiwebSocket.opened) {
+ console.log("打印机列表：", hiwebSocket.printerList);
+}
+```
+
+查看示例数据
+ +```js +clientInfo = { + hostname: "Admin", // 主机名 + version: "1.0.13", // 客户端版本 + platform: "win32", // 平台类型 + arch: "x64", // 系统架构 + mac: "d0:46:0c:97:4b:68", // mac 地址 + ip: "192.168.0.114", // 设备 ip + ipv6: "fe80::2157:4b26:1c2f:c4ca", // 设备 ipv6 + clientUrl: "http://192.168.0.114:17521/", // 本地服务地址 + machineId: "0e8b222e-517b-491e-883a-b6283a62e280", // 设备唯一 ID（可用于标识） + nickName: "打印客户端", // 客户端设置的友好昵称（可用于显示、标识） +}; +``` + +
+
+
+调用 api 获取最新的打印机列表
+
+```js
+hiprint.refreshPrinterList((printerList) => {
+ console.log("最新打印机列表：", printerList);
+});
+// OR
+hiwebSocket.refreshPrinterList();
+hinnn.event.on("printerList", (printerList) => {
+ console.log("最新打印机列表：", printerList);
+});
+```
+
+#### 2.1.3 获取纸张信息 仅 win 支持，需主动请求
+
+```js
+// 获取指定打印机纸张信息
+hiwebSocket.getPaperSizeInfo(printerName);
+// 获取所有打印机纸张信息
+hiwebSocket.getPaperSizeInfo();
+hinnn.event.on("paperSizeInfo", (paperSize) => {
+ console.log(`${printerName} 纸张：`, paperSize);
+});
+```
+
+查看示例数据
+ +```js +printerList = [ + { + description: "", + displayName: "Microsoft Print to PDF", + isDefault: true, + name: "Microsoft Print to PDF", + options: { + "printer-location": "", + "printer-make-and-model": "Microsoft Print To PDF", + system_driverinfo: + "Microsoft Print To PDF;10.0.19041.3570 (WinBuild.160101.0800);Microsoft® Windows® Operating System;10.0.19041.3570", + }, + status: 0, + }, {…}, {…} +]; +``` + +
+
+
+### 2.2 连接中转服务器
+
+#### 2.2.1 获取客户端集合 clients
+
+连接成功后中转服务器会主动发送 clients 到 web。
+
+```js
+// 在连接成功的情况下从 hiwebSocket 获取客户端集合
+if (hiwebSocket.opened) {
+ console.log("客户端集合：", hiwebSocket.clients);
+}
+```
+
+调用 api 获取最新的客户端集合
+
+```js
+hiprint.getClients((clients) => {
+ console.log("客户端集合：", clients);
+});
+// OR
+hiwebSocket.getClients();
+hinnn.event.on("clients", (clients) => {
+ console.log("客户端集合：", clients);
+});
+```
+
+查看示例数据
+ +```js +paperSize = [ + { + "PrinterName": "Microsoft Print to PDF", + "TaskNumber": 0, // 打印队列任务数 + "Status": 0, // 打印机状态码 + "StatusMsg": "准备就绪（Ready）", // 打印机状态信息 + "PaperSizes": [ + { + "Height": 1100, + "Kind": 1, + "PaperName": "信纸", + "RawKind": 1, + "Width": 850 + }, + {...}, {...}, {...} + ] + } +] +``` + +
+
+
+#### 2.2.2 获取打印机列表 printerList
+
+连接成功后中转服务器会主动发送打印机列表到 web。
+
+```js
+// 在连接成功的情况下从 hiwebSocket 获取打印机列表
+if (hiwebSocket.opened) {
+ console.log("打印机列表：", hiwebSocket.printerList);
+}
+```
+
+查看示例数据
+ +```js +paperSize = { + HB2OhMUEJuQx9YdxAAAV: { + clientId: "HB2OhMUEJuQx9YdxAAAV", + printerList: [ + { + name: "导出为WPS PDF", + displayName: "导出为WPS PDF", + description: "", + status: 0, + isDefault: false, + options: { + "printer-location": "", + "printer-make-and-model": "Kingsoft Virtual Printer Driver", + system_driverinfo: + "Kingsoft Virtual Printer Driver;0,3,0,0;WPS Office;12,1,0,19768", + }, + }, {...}, {...} + ], + hostname: "PC-2024111111", + version: "1.0.13", + platform: "win32", + arch: "x64", + mac: "aa:bb:cc:dd:ee:ff", + ip: "192.168.1.2", + ipv6: "240e:390:96a4:bb70:1486:fcc8:3ed9:42be", + clientUrl: "http://192.168.1.2:17521/", + machineId: "5a6f6a42-fb17-4b3f-bc2f-3fb104f4910a", + nickName: "打印客户端1", + }, + "wHOB6kn6JkPLV-b5AAAm": { + clientId: "wHOB6kn6JkPLV-b5AAAm", + printerList: [ + { + name: "TSC TTP-244", + displayName: "TSC TTP-244", + description: "", + status: 0, + isDefault: true, + options: { + "printer-location": "", + "printer-make-and-model": "TSC TTP-244", + system_driverinfo: + "TSC TTP-244;0.3.0.0;Seagull Printer Drivers;1.0.0", + }, + }, {...}, {...} + ], + hostname: "PC-2025111111", + version: "1.0.13", + platform: "win32", + arch: "x64", + mac: "aa:bb:cc:dd:ee:ff", + ip: "192.168.1.3", + ipv6: "fe80::99e:98ee:16f:18", + clientUrl: "http://192.168.127.111:17521/", + machineId: "48017401-113e-4394-a348-2526f0c9031b", + nickName: "打印客户端2", + }, +}; +``` + +
+
+
+## 3. 打印
+
+### 3.1 直连 `electron-hiprint` 静默打印
+
+#### 3.1.1 打印 hiprint 模板
+
+```js
+const hiprintTemplate = new hiprint.PrintTemplate({
+ template: {}, // 模板json对象
+});
+// 单一模板静默打印
+hiprintTemplate.print2(
+ printData, // Object | Array