菜鸟打印组件系列-vue3快速接入
文章目录
- 前言
- 1. 相关名词或语句
- 2. CAINIAO打印组件能力
- 3. 安装与下载
- 4. vue3集成步骤
-
-
- 4.1 使用pina 创建websoket相关处理的模块。
- 4.2 创建本地自定义模板（要打印的模板以及样式）
- 4.3 结合el-table ，实现批量打印
-
- 总结
前言
文章主要记录不注册商家，直接使用菜鸟打印组件提供的自定义模板的能力，来实现打印的。案例是基于vue3+vite+element-plus ，注册商家的使用可以参考官方案例。
1. 相关名词或语句
- CAINIAO打印组件 （菜鸟打印组件）
- cnPrinter（菜鸟打印组件）
- ISV（第三方软件服务商）
- 不干胶标签纸（快递单或则商品标签贴物品 ）
- 面单（指快递单等）
- DPI 水平 （DPI（Dots Per Inch，每英寸点数），图像每英寸（1 英寸 = 25.4 毫米）长度内的像素点数）
- 垂直偏移量 （设置打印内容在面单的位置）
2. CAINIAO打印组件能力
1.支持面单使用模板，这里的模板要注册商家号获取与管理。
2.支持全定义模板.
3. 兼容能力：支持windows 与 macOS（但不支持14以上）
4. 不支持独立部署，不支持离线使用（打印的数据都要上传到菜鸟的云服务器处理后，返回渲染后的面单，注意国外windows服务器传输比较慢）
5. 面对国内用户
3. 安装与下载
CAINIAO打印组件官网 下载插件；
引用自官方 打印组件商家操作手册
4. vue3集成步骤
4.1 使用pina 创建websoket相关处理的模块。
菜鸟打印组件是通过websoket的方式发送指令给打印机的。这里使用pina 创建websoket相关处理的模块。
其中用的是 13528 端口。也就是 ws://127.0.0.1:13528 , 注意端口是否被占用。
下面的代码我让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打包的时候会处理，导致打印出错。
<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;">
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;">
]]>
text>
layout>
<layout left="108" top= "28" width="80" height="36" >
<text
style="fontSize:12;align:left;">
]]>
text>
layout>
<layout left="108" top= "34" width="120" height="36" >
<text
style="fontSize:12;align:left;">
]]>
text>
layout>
<layout left="108" top= "40" width="80" height="36" >
<text
style="fontSize:12;align:left;">
]]>
text>
layout>
<layout left="108" top= "46" width="80" height="36" >
<text
style="fontSize:12;align:left;">
]]>
text>
layout>
<layout left="108" top= "52" width="80" height="36" >
<text
style="fontSize:12;align:left;">
text>
layout>
<layout id="1550220042465924" 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;">
text>
th>
<th width="26">
<text style="fontSize:10;align:center;">
text>
th>
<th width="31">
<text style="fontSize:10;align:center;">
text>
th>
<th width="36">
<text style="fontSize:10;align:center;">
text>
th>
<th width="13">
<text style="fontSize:10;align:center;">
text>
th>
<th width="13">
<text style="fontSize:10;align:center;">
text>
th>
tr>
<% for(i=0;i<_data.arr.length;i++) { %>
<tr>
<td>
<text style="fontSize:10;align:center;">
]]>
text>
td>
<td>
<text style="fontSize:10;align:center;">
]]>
text>
td>
<td>
<text style="fontSize:10;align:center;">
]]>
text>
td>
<td>
<text style="fontSize:10;align:center;">
]]>
text>
td>
<td>
<text style="fontSize:10;align:center;">
]]>
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": "123458976",
"version": "1.0",
"task": {
"taskID": "7293666",
"preview": false,
"printer": "", // 为空字符串时，取系统默认打印机
"documents": [{
"documentID": "0123456789",
"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模块，连接菜鸟组件以及批量打印，实现简单的批量打印功能。