接到一个新的零售行业web端标签打印的需求，第一次接触标签打印机，记录一下经验。
项目用的是普通的vue框架。

环境准备

我们先找到TSC的官网地址里面可以根据打印机型号下载我们需要的开发手册、简单demo、还有打印机驱动。

我们会下载到一个叫做TSC.js的文件，里面有各种打印机方法。我们将这个文件导入到项目中。

前端TSC TTP系列标签打印机开发调用

里面通过维护一个叫做functions_inorder的数组来保存将要通信到打印机的指令集合

前端TSC TTP系列标签打印机开发调用

连接打印机

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中，打印文字，打印条码都有现成的方法

前端TSC TTP系列标签打印机开发调用

直接使用方法就可以，这里就不赘述。

最后使用printUtil.printlabel(份数，张数)，维护完functions_inorder数组后，通过websocket的send方法发送至打印机

值得一提的是在TSC.js中没有直接打印二维码的方法，如果我们需要打印二维码的话，我们需要这个sendcommand_crlf命令

前端TSC TTP系列标签打印机开发调用

这个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单推人