vue-electron 实现前端对接Tsc-ttp244pro标签打印机

前言

公司要求前端对接硬件服务调用标签打印机,因为公司后端暂时无法解决打印时报错,卡住服务挂掉不自动重启的问题,于是期望前端实现这个功能,,,,,

在tsc的官网,我找到了对应的nodeJS,里面有对应的各种方法资料下载 | TSC Printers链接在这,自行参考获取对应语言及硬件型号

在网上搜了很多,有各种的方法,也都一一尝试了,很显然不适用,一开始我直接将nodejs嵌入我的项目中,在启动时通过命令同时启动node.js和项目,在这个情况下打印是可以正常进行的,问题出现在打包成exe文件安装后,无法打印,我的理解是我在本地运行的时候两个项目嵌不嵌一起关系其实不大,能打印是因为我本地启动了打印的js,但是打包时很显然这个js并没有运行,官网下载的包中使用的是edge-js,在electron项目中是不适用的,但是由于我只是表面嵌入了这个项目,所以我并没有意识到这个问题

实现

在踩了无数坑后,最后发现不需要嵌入项目,应当在background.js中嵌入主要的打印代码,并且使用electron-edge-js,由于期望实现打印参数动态配置,所以我这边将数据处理为前端传参


  try {
    openport = edge.func({
      assemblyFile: dllFile,
      typeName: 'TSCSDK.node_usb',
      methodName: 'openport'
    })
  } catch (error) {
    console.error(error)
  }
  try {
    setup = edge.func({
      assemblyFile: dllFile,
      typeName: 'TSCSDK.node_usb',
      methodName: 'setup'
    })
  } catch (error) {
    console.log(error, 'error')
  }

  try {
    sendcommand = edge.func({
      assemblyFile: dllFile,
      typeName: 'TSCSDK.node_usb',
      methodName: 'sendcommand'
    })
  } catch (error) {
    console.log(error, 'error')
  }

  try {
    clearbuffer = edge.func({
      assemblyFile: dllFile,
      typeName: 'TSCSDK.node_usb',
      methodName: 'clearbuffer'
    })
  } catch (error) {
    console.log(error, 'error')
  }

  try {
    barcode = edge.func({
      assemblyFile: dllFile,
      typeName: 'TSCSDK.node_usb',
      methodName: 'barcode'
    })
  } catch (error) {
    console.log(error, 'error')
  }

  try {
    printlabel = edge.func({
      assemblyFile: dllFile,
      typeName: 'TSCSDK.node_usb',
      methodName: 'printlabel'
    })
  } catch (error) {
    console.log(error, 'error')
  }

  try {
    closeport = edge.func({
      assemblyFile: dllFile,
      typeName: 'TSCSDK.node_usb',
      methodName: 'closeport'
    })
  } catch (error) {
    console.log(error, 'error')
  }

  try {
    windowsfont = edge.func({
      assemblyFile: dllFile,
      typeName: 'TSCSDK.node_usb',
      methodName: 'windowsfont'
    })
  } catch (error) {
    console.log(error, 'error')
  }

  appExpress.listen(8989, function() {
    console.log('Server Start!!进来了请注意')
  })

将需要的方法声明进来,在app.on('ready', async() => {})中,最后需要一个端口号监听进行监听

前端代码

axios等引入就不贴代码了,坐标暂时写在前端了,后期可以由后台接口统一返回,配置就会方便些,调位置直接在库里改坐标就行,像Y轴坐标一般是不会变的,X轴由于一行有两个标签会有变化

   async printData(data) {
      const options = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
       const data1 = []
        // eslint-disable-next-line complexity
       data.forEach((i, index) => {
         data1.push({
           yourName: {
             name: i.laboratoryCode || '',
             x: index % 2 === 0 ? 25 : 225,//两个坐标,一左一右
             y: 0
           },
            QRCODE: {
              name: i.laboratoryCode,
              x: index % 2 === 0 ? '140' : '340'
            }
          })
        })
        axios.post('http://localhost:8989/test', JSON.stringify(data1), options).then((res) => {
          // console.log('数据：', res)
     
    },

以上

最后

打包后可以运行,也可以打印,但是对于前端性能还是不是很友好,例如打印机打印会比较慢,暂时没有出现因为打印卡顿导致electron主进程崩溃的例子,但是不排除有这个风险,打印的过程其实远不如后端服务架包来的丝滑,数据多了打印起来打印机跟老化了一样一下一下往外吐,对于其他类型的语言项目,打印的大部分逻辑是互通的,差别主要集中在项目打包运行这块,也和官方发过邮件,但是问了一下什么问题就不再回复我了.....

如果有更好的解决办法可以评论探讨,我学习一下,文章不正确的地方也请指教.

vue-electron 实现前端对接Tsc-ttp244pro标签打印机

前言

实现

最后

猜你喜欢