server2008网站建设,商业网站源码免费下载,wordpress数据库批量替换域名,基于 wordpress在开发 ERP / WMS / 电商 / 生产系统 时#xff0c;经常会遇到一个非常现实的问题#xff1a; 如何在 Web 系统中稳定地打印标签#xff1f; 例如#xff1a; 商品标签 仓库标签 生产条码 快递标签 但 Web 打印一直有几个难点#xff1a; 浏览器 window.print() 不可…在开发ERP / WMS / 电商 / 生产系统时经常会遇到一个非常现实的问题如何在 Web 系统中稳定地打印标签例如商品标签仓库标签生产条码快递标签但 Web 打印一直有几个难点浏览器window.print()不可控无法直接调用打印机标签尺寸难控制不同系统兼容问题为了更稳定地解决这个问题我做了一个开源项目知印Zing Print一个基于QZ Tray 的工业级标签打印工具。项目地址https://gitee.com/zinghub/zing-print它的目标很简单为 Web 系统提供一个稳定、可复用的标签打印组件。一、为什么 Web 打印很难很多系统最初都是用window.print()但很快就会遇到问题1 无法控制打印机浏览器打印不能指定打印机不能自动打印不能控制纸张用户必须手动操作。2 标签尺寸不稳定标签打印通常是60mm × 40mm但浏览器打印DPI 不一致页面缩放影响布局导致打印出来的尺寸偏差。3 ERP系统需要批量打印例如订单包含 50 个商品需要一次打印50 个标签浏览器打印体验非常差。二、解决方案QZ TrayQZ Tray是一个常见的 Web 打印解决方案。官网https://qz.io它的核心原理是Web 页面 ↓ WebSocket ↓ QZ Tray 本地服务 ↓ 操作系统打印机优点可以获取打印机列表可以指定打印机支持静默打印支持多种打印格式因此很多工业系统 / ERP 系统都使用这个方案。三、知印zing-print项目介绍知印zinghub/zing-print是一个基于 QZ Tray 的 Vue3 打印组件。目标让 Web 系统可以快速集成标签打印能力。特点Vue3 组件化Ant Design Vue UI内置标签模板打印机管理标签预览测试打印安装pnpm add zinghub/zing-print升级pnpm up zinghub/zing-print四、项目依赖使用前需要安装依赖说明Vue3前端框架Ant Design VueUI组件QZ Tray本地打印服务同时需要在电脑上安装并启动QZ Tray下载地址https://qz.io/download/https://qz.io/download/浏览器需要可以访问localhost五、在 Vue3 项目中使用首先在main.ts中注册组件。import { createApp } from vue import Antd from ant-design-vue import ant-design-vue/dist/reset.css import ZingPrint from zinghub/zing-print const app createApp(/* root */) app.use(Antd) app.use(ZingPrint)这样就完成了插件注册。六、使用 PrintSetting 打印设置组件PrintSetting是组件中最核心的页面。使用方式template PrintSetting / /template script setup langts import { PrintSetting } from zinghub/zing-print /script这个组件已经内置完整打印能力。包括连接 QZ Tray获取打印机列表选择默认打印机标签预览测试打印可以直接作为ERP 打印设置页面使用。七、标签模板组件LabelPrinter如果你不需要完整设置页面也可以直接使用标签组件。组件LabelPrinter示例template LabelPrinter :template1 text1产品 value1苹果 text2批次 value2A001 text3日期 value32024-01-01 text4规格 value4500g text5产地 value5山东 qrcode123456789 barcode123456789 :label-width-mm60 :label-height-mm40 / /template script setup langts import { LabelPrinter } from zinghub/zing-print /script支持模板1 / 模板2 / 模板3二维码条形码标签尺寸设置适合页面预览标签设计自定义布局八、低层打印 API如果需要更灵活控制也可以使用低层方法。例如import { connectQZ, listPrinters, printHTML } from zinghub/zing-print常见流程1 连接 QZ TrayconnectQZ()2 获取打印机列表listPrinters()3 发送打印内容printHTML()这样可以实现完全自定义的打印逻辑。九、典型 ERP 打印流程在 ERP 系统中打印流程通常是订单↓商品列表↓生成标签↓发送打印例如订单包含 10 个商品就可以生成10 个标签然后通过 QZ Tray 一次性发送到打印机。十、本地开发如果你想运行项目 Demopnpm install pnpm dev即可启动本地演示页面。十一、适用场景知印适用于系统使用场景ERP商品标签WMS仓库标签MES生产条码电商系统发货标签特别适合工业级标签打印需求。十二、项目地址项目开源地址https://gitee.com/zinghub/zing-print结尾Web 打印一直是很多系统开发的痛点。知印zing-print的目标就是让 Vue3 项目可以快速拥有工业级标签打印能力。如果你也在做ERP仓储系统生产系统希望这个项目可以帮到你。