前言
上一篇文章vue3 实现自定义模板我们实现了自定义模板打印，基于已有的打印模板，本篇文章我们来实现云端打印，项目主要功能均基于开源项目 vue-plugin-hiprint 开发
云端打印基于打印服务端+打印桌面端+后台三部分组成，上一篇文章我们已经完成后台的大部分功能，接下来主要介绍其他两部分的安装
准备
桌面端
打印桌面端 是一个 electron-vue 项目，这里我们可以下载源码，在本地启动运行，安装依赖时候 nodejs 版本最好 18 以下，同时还需要电脑安装 Visiual Studio Build Tools，安装依赖的时候，我们可以来部署打印中转服务
服务端
中转服务 是一个 nodejs 项目，有服务器的可以自己部署服务，官方推荐 docker 镜像一键部署
克隆项目
git clone https://github.com/Xavier9896/node-hiprint-transit.git
cd node-hiprint-transit
启动服务
docker-compose up -d
🎈 通过镜像启动服务会跳过端口和 token 设置，端口默认是 17521，token 默认配置在根目录config.json
也可以下载项目在本地运行，这个在项目仓库都有介绍，在 nodejs 服务启动成功后，我们可以运行桌面端项目，启动成功后打开应用，在应用设置页面-》中转设置，配置参数，点击测试连接，显示连接成功
打印
桌面端和服务端连接成功，接下来就是后台和服务端连接
在 服务端 项目仓库中有介绍后台vue-plugin-print连接服务的方法
import { hiprint } from 'vue-plugin-hiprint';
hiprint.init({
host: 'https://v5.printjs.cn:17521', // 此处输入服务启动后的地址
token: 'hiprint-test-1', // 用于鉴权的token
})
如果仅仅配置这个，当使用hiwebSocket.socket.on监听消息时候，返回的并不是服务发送的信息，而是桌面端 socket 返回的信息，可能跟vue-plugin-hiprint源码中hiwebSocket设置有关， 默认hiwebSocket连的就是客户端的 socket
这里我们可以调用setHost指定连接地址，重新连接
hiwebSocket.setHost("https://printjs.cn:17521", "vue-plugin-hiprint");
也可以使用 socket 连接服务端，笔者使用 第二种方式，安装依赖
npm install socket.io-client@4 --save
连接服务端 socket
const socket = io("服务地址", {
transports: ["websocket"],
auth: {
token: "hiprint",
},
});
监听返回，并 打印结果，template是hiprint.PrintTemplate的实例，通过getJson( )获得模板的 JSON 数据，record
socket.on("printerList", (printerList) => {
socket.emit('render-print', {
template: template.getJson(),
data: record,
client: printerList[0].server.clientId,
})
});
