知印（@zinghub/zing-print）

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

安装

pnpm add @zinghub/zing-print

快速开始（PrintSetting 打印设置页）

@zinghub/zing-print 依赖 vue@3 与 ant-design-vue@4，请确保你的业务项目已安装并正确初始化 Ant Design Vue。

使用前请确保：

• 已安装并启动 QZ Tray：https://qz.io/download/
• 浏览器可访问本机 QZ Tray 服务（默认 localhost 端口）

1）在 main.ts 注册（Ant Design Vue + 知印）

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)

2）在页面中使用 PrintSetting

import { PrintSetting } from '@zinghub/zing-print'

<template>
  <PrintSetting />
</template>

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

3）打印能力说明

PrintSetting 已内置以下能力，可直接用于业务开发：

• 连接 QZ Tray
• 获取/选择打印机，并保存默认打印机
• 调整模板参数（字体、间距、条码/二维码尺寸、标签尺寸等）
• 预览标签
• 打印测试（使用内置模板1渲染并调用 QZ Tray 打印）

内置模板打印（LabelPrinter）

如果你不想用 PrintSetting，也可以直接用 LabelPrinter 渲染内置模板（Template1/2/3），用于页面预览或自定义布局。

<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>

低层方法（可选）

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

本地运行（开发/预览）

pnpm install
pnpm dev

演示

捐赠支持

如果知印对你有帮助，欢迎请作者喝杯咖啡。

| 微信 | 支付宝 | | --- | --- | | | |