Vue3 标签打印方案：可视化设计 + 批量打印 + ERP集成（基于 QZ Tray）

杨宁山
0 阅读1分钟

​

在开发 ERP / WMS / 电商 / 生产系统 时，经常会遇到一个非常现实的问题：

如何在 Web 系统中稳定地打印标签？

例如：

  • 商品标签

  • 仓库标签

  • 生产条码

  • 快递标签

但 Web 打印一直有几个难点：

  • 浏览器 window.print() 不可控

  • 无法直接调用打印机

  • 标签尺寸难控制

  • 不同系统兼容问题

为了更稳定地解决这个问题，我做了一个开源项目：

知印（Zing Print）

一个基于 QZ Tray 的工业级标签打印工具。

项目地址：gitee.com/zinghub/zin…

它的目标很简单：

为 Web 系统提供一个 稳定、可复用的标签打印组件。

一、为什么 Web 打印很难？

很多系统最初都是用：

window.print()

但很快就会遇到问题：

1 无法控制打印机

浏览器打印：

  • 不能指定打印机

  • 不能自动打印

  • 不能控制纸张

用户必须手动操作。

2 标签尺寸不稳定

标签打印通常是：

60mm × 40mm

但浏览器打印：

  • DPI 不一致

  • 页面缩放影响布局

导致打印出来的尺寸偏差。

3 ERP系统需要批量打印

例如：

订单包含 50 个商品

需要一次打印：

50 个标签

浏览器打印体验非常差。

二、解决方案：QZ Tray

QZ Tray 是一个常见的 Web 打印解决方案。

官网：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 Vue

UI组件

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 lang="ts">
import { PrintSetting } from '@zinghub/zing-print'
</script>

这个组件已经内置完整打印能力。

包括：

  • 连接 QZ Tray

  • 获取打印机列表

  • 选择默认打印机

  • 标签预览

  • 测试打印

可以直接作为 ERP 打印设置页面 使用。

七、标签模板组件（LabelPrinter）

如果你不需要完整设置页面，也可以直接使用标签组件。

组件：

LabelPrinter

示例：

<template>
<LabelPrinter
:template="1"
text1="产品"
value1="苹果"
text2="批次"
value2="A001"
text3="日期"
value3="2024-01-01"
text4="规格"
value4="500g"
text5="产地"
value5="山东"
qrcode="123456789"
barcode="123456789"
:label-width-mm="60"
:label-height-mm="40"
/>
</template>

<script setup lang="ts">
import { LabelPrinter } from '@zinghub/zing-print'
</script>

支持：

  • 模板1 / 模板2 / 模板3

  • 二维码

  • 条形码

  • 标签尺寸设置

适合：

  • 页面预览

  • 标签设计

  • 自定义布局

八、低层打印 API

如果需要更灵活控制，也可以使用低层方法。

例如：

import { connectQZ, listPrinters, printHTML } from '@zinghub/zing-print'

常见流程：

1 连接 QZ Tray

connectQZ()

2 获取打印机列表

listPrinters()

3 发送打印内容

printHTML()

这样可以实现完全自定义的打印逻辑。

九、典型 ERP 打印流程

在 ERP 系统中，打印流程通常是：

订单
↓
商品列表
↓
生成标签
↓
发送打印

例如：

订单包含 10 个商品

就可以生成：

10 个标签

然后通过 QZ Tray 一次性发送到打印机。

十、本地开发

如果你想运行项目 Demo：

pnpm install
pnpm dev

即可启动本地演示页面。

十一、适用场景

知印适用于：

系统

使用场景

ERP

商品标签

WMS

仓库标签

MES

生产条码

电商系统

发货标签

特别适合 工业级标签打印需求。

十二、项目地址

项目开源地址：gitee.com/zinghub/zin…

​编辑

结尾

Web 打印一直是很多系统开发的痛点。

知印（zing-print） 的目标就是：

让 Vue3 项目可以快速拥有工业级标签打印能力。

如果你也在做：

  • ERP

  • 仓储系统

  • 生产系统

希望这个项目可以帮到你。

​

avatar
文章
阅读
粉丝