AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-12-15 631
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文一开始介绍了菜鸟打印组件，相关名词，以及在打印方面的相关能力和使用时的注意点。接着举例基于vue3+pina+elementPlus的项目通过步骤1.使用pina 创建websoket相关处理的模块,处理打印机与浏览器长连接的过程。步骤2.按照菜鸟要求的模板语言，调整自己的打印模板，并且放在public文件夹下，步骤3.在列表页其中使用el-table组件，引入websoket模块，连接菜鸟组件以及批量打印，实现简单的批量打印功能

前言

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

1. 相关名词或语句

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

2. CAINIAO打印组件能力

1.支持面单使用模板，这里的模板要注册商家号获取与管理。
2.支持全定义模板.

  1. 兼容能力：支持windows 与 macOS（但不支持14以上）
  2. 不支持独立部署，不支持离线使用（打印的数据都要上传到菜鸟的云服务器处理后，返回渲染后的面单，注意国外windows服务器传输比较慢）
  3. 面对国内用户

    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打包的时候会处理，导致打印出错。

<?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="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;">
                                                      <![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": "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模块，连接菜鸟组件以及批量打印，实现简单的批量打印功能。

文章标签：
Windows
iOS开发
人工智能
MacOS
TE-茶叶蛋
目录
相关文章
光明顶阳顶天
|
22天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
126 64
光明顶阳顶天
|
22天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
总的来说，Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进，使其更适应现代前端开发的需求和趋势。但需要注意的是，在迁移过程中可能需要对一些代码进行调整和适配。
光明顶阳顶天
101 60
mao29955
|
22天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
28 8
mao29955
|
21天前
|
存储 JavaScript 数据管理
除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
需要注意的是，在实际开发中，应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时，要综合考虑代码的可读性、可维护性和性能等因素，以确保系统的稳定和高效运行。
mao29955
21 1
mao29955
|
21天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性，在处理一些复杂的组件间通信问题时，可以提供一种灵活的解决方案。通过合理使用它们，可以帮助我们更好地避免`v-model`的循环引用问题，提高代码的质量和可维护性。
mao29955
32 1
光明顶阳顶天
|
22天前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
39 2
快乐就是哈哈哈
|
1月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
快乐就是哈哈哈
60 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
html的七十二变
|
1月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`，实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象，动态响应属性的增删，还优化了嵌套对象的处理和依赖追踪，减少了不必要的视图更新，提升了性能。同时，Vue 3.x对数组的响应式处理也更加灵活，简化了开发流程。
html的七十二变
43 3
html的七十二变
|
1月前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
53 5
html的七十二变
|
1月前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
42 4

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放
  • 3
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 4
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 5
    vue之webpack打包原理和用法详解
  • 6
    全栈开发实战｜​人事管理系统的设计与实现（Spring Boot + Vue 3 + MyBatis）
  • 7
    浏览器垃圾回收机制与 Vue 项目内存泄漏分析
  • 8
    中文代码示例之Vuejs入门教程(一)
  • 9
    Vue3——使用inject和provide对页面进行刷新
  • 10
    新建Vue项目
  • 1
    使用Vue.js构建交互式前端的技术探索
    88
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    164
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    149
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    180
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    103
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    120

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云oss存储简介和如何使用