# 知印

**Repository Path**: zinghub/zing-print

## Basic Information

- **Project Name**: 知印
- **Description**: 知印
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-13
- **Last Updated**: 2026-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3

## README

# 知印（@zinghub/zing-print）

<img src="logo.jpg" width="80" height="80" />
基于 QZ Tray 的工业级标签打印工具。

## 安装

```bash
pnpm add @zinghub/zing-print
```

已安装旧版本可升级：

```bash
pnpm up @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 + 知印）

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

### 2）在页面中使用 PrintSetting

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

```vue
<template>
  <PrintSetting />
</template>

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

如果你当前安装的版本提示 `does not provide an export named 'PrintSetting'`，请先升级到最新版；或者先使用 `app.use(ZingPrint)`，再在模板中直接使用 `<PrintSetting />`。

### 3）打印能力说明

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

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

## 内置模板打印（LabelPrinter）

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

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

## 低层方法（可选）

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

## 本地运行（开发/预览）

```bash
pnpm install
pnpm dev
```

## 演示

![知印演示](image.png)

## 捐赠支持

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

| 微信 | 支付宝 |
| --- | --- |
| <img src="wechatpay.JPG" alt="微信收款码" width="220" /> | <img src="alipay.JPG" alt="支付宝收款码" width="220" /> |