菜鸟打印组件系列-vue3快速接入

大家好，欢迎来到IT知识分享网。

文章目录

前言
1. 相关名词或语句
2. CAINIAO打印组件能力
3. 安装与下载
4. vue3集成步骤
总结

前言

文章主要记录不注册商家，直接使用菜鸟打印组件提供的自定义模板的能力，来实现打印的。案例是基于vue3+vite+element-plus ，注册商家的使用可以参考官方案例。

1. 相关名词或语句

CAINIAO打印组件（菜鸟打印组件）
cnPrinter（菜鸟打印组件）
ISV（第三方软件服务商）
不干胶标签纸（快递单或则商品标签贴物品）
面单（指快递单等）
DPI 水平（DPI（Dots Per Inch，每英寸点数），图像每英寸（1 英寸 = 25.4 毫米）长度内的像素点数）
垂直偏移量（设置打印内容在面单的位置）

2. CAINIAO打印组件能力

3. 安装与下载

4. vue3集成步骤

4.1 使用pina 创建websoket相关处理的模块。

下面的代码我让AI生产的，然后稍微改了一下

import { 
      defineStore } from 'pinia' import { 
      printStatusApi } from '@/api/xxx' // export const WS_URL = 'ws://127.0.0.1:13528' import { 
      RefNumEnum, WS_URL } from '@/utils/constant' import { 
      ElMessageBox } from 'element-plus' export const useWebSocketStore = defineStore('websocket', { 
      state: () => ({ 
      ws: null, // 全局存储一个 websoket ，避免重复创建 isConnected: false, // 判断菜鸟组件是否以及启动 reconnectInterval: 5000, reconnectTimer: null, callbackEventObj: { 
     }, isShowErrBox: false }), actions: { 
      connect(cb: any, callbackType: any) { 
      this.callbackEventObj[callbackType] = cb // 打印成功或则失败的回调函数，场景不同用callbackType 来判断对于的回调 if (this.ws && this.ws.readyState === 1) return this.ws = new WebSocket(WS_URL) this.ws.onopen = () => { 
      console.log('WebSocket connected') this.isConnected = true } this.ws.onmessage = (event) => { 
      console.log('WebSocket message received:', event.data) // 处理收到的消息 this.subscribe(JSON.parse(event.data || ''), cb) } this.ws.onclose = () => { 
      console.log('WebSocket disconnected') this.isConnected = false this.reconnect(cb, callbackType) } this.ws.onerror = (error) => { 
      console.error('WebSocket error:', error) this.reconnect(cb, callbackType) } }, send(message) { 
      if (this.isConnected) { 
      this.ws.send(message) } else { 
      console.warn('WebSocket is not connected') } }, close() { 
      if (this.ws) { 
      this.ws.close() this.ws = null } }, subscribe(data: any, callBackFn: any) { 
      switch (data.cmd) { 
      case 'getPrinters': console.log('获取打印机列表', data.printers) if (data.printers) { 
      data.printers = data.printers.filter((i: any) => { 
      return i.status == 'enable' }) } // 缓存起来 localStorage.setItem('PRINTERS', JSON.stringify(data.printers || [])) break case 'getPrinterConfig': console.log('获取打印机配置') console.log(data.printer) break case 'print': console.log('发送打印') // console.log(data) if (data?.status === 'failed' && !this.isShowErrBox) { 
      this.isShowErrBox = true ElMessageBox({ 
      title: 'Warning', message: `${ 
       data?.msg}`, confirmButtonText: 'I know', callback: () => { 
      this.isShowErrBox = false } }) } break case 'notifyPrintResult': console.log('打印通知----',data) if (['printed', 'failed'].includes(data.taskStatus)) { 
      // 打印成功/失败 回调记录状态Api接口 this.printStatus(data) } break case 'setPrinterConfig': console.log('设置打印机配置') console.log(data) break } }, // 这里的data是发送给菜鸟组件的数据按文档要求来，一般有requestID，TaskID等，把自定义的拼接进去 async printStatus(data: any) { 
      // 传参 let curId = data?.requestID.split('#') && data?.requestID.split('#')[0] await printStatusApi(curId ) this.callbackEventObj[markType]() }, // 这里的重连可以设置一个次数后，停止重连 reconnect(cb, callbackType) { 
      if (!this.reconnectTimer) { 
      console.log(`WebSocket will reconnect in ${ 
       this.reconnectInterval} ms`) this.reconnectTimer = setTimeout(() => { 
      console.log('WebSocket reconnecting...') this.connect(cb, callbackType) this.reconnectTimer = null }, this.reconnectInterval) } }, stopReconnect() { 
      if (this.reconnectTimer) { 
      clearTimeout(this.reconnectTimer) this.reconnectTimer = null } } } })

4.2 创建本地自定义模板（要打印的模板以及样式）

自定义的模板，是菜鸟组件定义模板语言。需要传到菜鸟的服务器处理后，渲染成真正的面单，这个文件放在public文件夹下，不然vite打包的时候会处理，导致打印出错。

<?xml version="1.0" encoding="UTF-8"?> <page xmlns="http://cloudprint.cainiao.com/print" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cloudprint.cainiao.com/print http://cloudprint-docs-resource.oss-cn-shanghai.aliyuncs.com/lpml_schema.xsd" xmlns:editor="http://cloudprint.cainiao.com/schema/editor" width="210" height="297" > <layout orientation="vertical" left="72" top= "6" width="60" height="20" style="zIndex:1;"> <text style="fontSize:18;align:center;"> <![CDATA[xxxxxxxxxxxxxxxx]]> </text> </layout> <layout left= "8" top= "22" width="80" height="36" > <barcode width= "80" height= "36" value= "<%=_data.xx%>" type= "code128a" style= "hideText:false" /> </layout> <layout orientation="vertical" left="108" top= "22" width="90" height="14" style="zIndex:4;"> <text style="fontSize:12;align:left;"> <![CDATA[xxxxxx: <%=_data.xx%> ]]> </text> </layout> <layout left="108" top= "28" width="80" height="36" > <text style="fontSize:12;align:left;"> <![CDATA[xxxxxx: <%=_data.xx%> ]]> </text> </layout> <layout left="108" top= "34" width="120" height="36" > <text style="fontSize:12;align:left;"> <![CDATA[xxxxxxx: <%=_data.xx%> ]]> </text> </layout> <layout left="108" top= "40" width="80" height="36" > <text style="fontSize:12;align:left;"> <![CDATA[xxxxx: <%=_data.x%> ]]> </text> </layout> <layout left="108" top= "46" width="80" height="36" > <text style="fontSize:12;align:left;"> <![CDATA[Print Date: <%=_data.xxx%>]]> </text> </layout> <layout left="108" top= "52" width="80" height="36" > <text style="fontSize:12;align:left;"> <![CDATA[xxx: ____________ ]]> </text> </layout> <layout id="65924" width="96" height="20.13" left="2" top="65.77" style="zIndex:4;"> <table width="200"> <tr > <th width="38"> <text style="fontSize:10;align:center;"> <![CDATA[xxx]]> </text> </th> <th width="26"> <text style="fontSize:10;align:center;"> <![CDATA[xxx]]> </text> </th> <th width="31"> <text style="fontSize:10;align:center;"> <![CDATA[xx]]> </text> </th> <th width="36"> <text style="fontSize:10;align:center;"> <![CDATA[xx]]> </text> </th> <th width="13"> <text style="fontSize:10;align:center;"> <![CDATA[xx]]> </text> </th> <th width="13"> <text style="fontSize:10;align:center;"> <![CDATA[xxx]]> </text> </th> </tr> <% for(i=0;i<_data.arr.length;i++) { 
       %> <tr> <td> <text style="fontSize:10;align:center;"> <![CDATA[<%=_data.arr[i].x%>]]> </text> </td> <td> <text style="fontSize:10;align:center;"> <![CDATA[<%=_data.arr[i].x%>]]> </text> </td> <td> <text style="fontSize:10;align:center;"> <![CDATA[<%=_data.arr[i].x%>]]> </text> </td> <td> <text style="fontSize:10;align:center;"> <![CDATA[<%=_data.arr[i].xx%>]]> </text> </td> <td> <text style="fontSize:10;align:center;"> <![CDATA[<%=_data.arr[i].x%>]]> </text> </td> <td> <text style="fontSize:10;align:center;"> </text> </td> </tr> <%}%> </table> </layout> <footer height="20" > <layout width="100" height="10" left="10" top="1" style="overflow:visible;"> <pageIndex format="Page currentPageNumber of totalPageNumber" style="fontSize:10;"></pageIndex> </layout> </footer> </page>

4.3 结合el-table ，实现批量打印

下面是在列表页面上使用上述模块，实现可以支持多选table的项，批量打印，记录打印的状态后刷新页面的核心代码，自行理解后根据自身业务或则交互使用。

import { 
      useWebSocketStore } from '@/store/modules/websocket' const useWebSocket = useWebSocketStore() // variable.selectedAr 是勾选的数据 const doPrint = async function () { 
      if (variable.selectedArr && variable.selectedArr.length === 0) { 
      return ElMessage.warning('请选择需要打印的数据') } // 使用for of 是为了可以串行，也就是支持 await 放回数据后再接下去执行，同是支持 break 中断循环。 for (const dataItem of variable.selectedArr) { 
      const { 
      data } = await detailApi({ 
     id:'123'}) // 注意这个模板需要放在 public 里面 const templateURL = `${ 
       window.location.origin}/cnPrinter/xxx.template` //打印对象 https://open.taobao.com/doc.htm?docId=107014&docType=1 根据官网调整 const jsonObject: any ={ 
      "cmd": "print", "requestID": "", "version": "1.0", "task": { 
      "taskID": "", "preview": false, "printer": "", // 为空字符串时，取系统默认打印机 "documents": [{ 
      "documentID": "0", "contents": [ { 
      "data": { 
      "value": "测试字段值需要配合自定义区变量名" }, "templateURL": `${ 
       templateURL}` }] }] } } //发送给打印机 useWebSocket.send(JSON.stringify(jsonObject)) } handleSearch() } const callBackFunction = () => { 
     } onMounted(() => { 
      useWebSocket.connect(callBackFunction,pageType) })

总结

本文一开始介绍了菜鸟打印组件，相关名词，以及在打印方面的相关能力和使用时的注意点。接着举例基于vue3+pina+elementPlus的项目通过步骤1.使用pina 创建websoket相关处理的模块,处理打印机与浏览器长连接的过程。步骤2.按照菜鸟要求的模板语言，调整自己的打印模板，并且放在public文件夹下，步骤3.在列表页其中使用el-table组件，引入websoket模块，连接菜鸟组件以及批量打印，实现简单的批量打印功能。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/122133.html