接到一个新的零售行业web端标签打印的需求,第一次接触标签打印机,记录一下经验。
项目用的是普通的vue框架。
环境准备
我们先找到TSC的官网地址里面可以根据打印机型号下载我们需要的开发手册、简单demo、还有打印机驱动。
我们会下载到一个叫做TSC.js的文件,里面有各种打印机方法。我们将这个文件导入到项目中。
里面通过维护一个叫做functions_inorder的数组来保存将要通信到打印机的指令集合
连接打印机
TSC的打印机是通过websocket来建立打印机通信,可以通过安装驱动在本地启动打印机服务,通过usb接口连接到电脑,也可以通过打印机联网直接连接。
我们首先新建一个websocket,地址是我们打印机所在的端口
const websocket=new WebSocket('ws://地址')
在webcokect的Open事件中使用Tsc.js中提供的工具方法,先清空functions_inorder,再send获取websocket连接中的打印机列表
import printUtil from '路径/TSC.js
websocket.onopen=()=>{
printUtil.init()
websocket.send(JSON.stringify({usb_list:[]}))
}
连接成功的话我们会在onmessage中获得这个端口上的打印机列表,
message的data结构中会获得一个叫usb_list[{USBPath,USBName}]的对象
最后我们使用根据打印机USBName找到的对应的usePath,在数组中输入连接的指令
,这里我用的是本地usb连接,网络连接使用另一个openport_net方法
printUtil.openport_usb(USBPath)
如果只是想要连接的话,这里我们就可以将维护的functions_inorder数组通过websocket发送到打印机了。
websocket.send(JSON.stringify({functions_inorder}))
指令执行完成后,websocket的onmessage事件会触发,在message中返回Finish字符串,标志我们发送过去的所有指令执行完成。
打印标签
如果连接后需要继续,我们在openport_usb/openport_net后先不急着发送指令,继续维护我们的functions_inorder数组。
在TSC.js中,打印文字,打印条码都有现成的方法
直接使用方法就可以,这里就不赘述。
最后使用printUtil.printlabel(份数,张数)
,维护完functions_inorder数组后,通过websocket的send方法发送至打印机
打印二维码
值得一提的是在TSC.js中没有直接打印二维码的方法,如果我们需要打印二维码的话,我们需要这个sendcommand_crlf命令
这个sendcommand_crlf命令是更接近于开发手册中的命令,有更严格的要求,手册中有字符串标记的参数,我们都必须加上”符号,譬如
printUtil.sendcommand_crlf(`QRCODE 10,20,H,4,A,0,\"${变量}\"`)
并且在开头,我们必须初始化标签纸张的大小,否则二维码会无法打印,出现空白的情况
printUtil.setup(大小参数)
一次性多张打印
最后我们时常会碰到一次性多张的情况,这种情况下,在每一张的相关指令,也就是循环体前,我们需要加上printUtil.clearbuffer()
,否则会出现打印内容不断重叠的情况。
因此我们完整的循环体内容大致为
printUtil.clearbuffer()
printUtil.setup(参数)
标签内容相关指令
printUtil.printlabel(1,1) //这里是每个内容打印一份
循环完毕后,使用wensocket的send方法websocket.send(JSON.stringify({functions_inorder}))
发送至打印机,message返回finish,完成打印。
原文链接:https://juejin.cn/post/7336092523771789351 作者:dd单推人