# Vue-Print-Designer

**Repository Path**: nswit_admin/vue-print-designer

## Basic Information

- **Project Name**: Vue-Print-Designer
- **Description**: 🔥Vue Print Designer 是一款可视化打印设计器，面向业务表单、标签、票据、快递单等场景，支持模板化、变量化，并提供静默打印与云打印能力，同时兼容多种导出/打印方式。
- **Primary Language**: TypeScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: https://printdot.cc/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 89
- **Created**: 2026-04-30
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



<p align="center">
    <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/src/assets/logo.png" alt="Vue Print Designer" width="96" height="96" />
</p>

<h1 align="center">Vue Print Designer</h1>

<p align="center">
  <a href="https://github.com/0ldFive/Vue-Print-Designer/stargazers"><img src="https://img.shields.io/github/stars/0ldFive/Vue-Print-Designer?style=flat-square&logo=github" alt="GitHub stars"></a>
  <a href="https://github.com/0ldFive/Vue-Print-Designer/network/members"><img src="https://img.shields.io/github/forks/0ldFive/Vue-Print-Designer?style=flat-square&logo=github" alt="GitHub forks"></a>
  <a href="https://www.npmjs.com/package/vue-print-designer"><img src="https://img.shields.io/npm/dm/vue-print-designer.svg?style=flat-square&logo=npm" alt="NPM Downloads"></a>
  <a href="https://www.npmjs.com/package/vue-print-designer"><img src="https://img.shields.io/npm/v/vue-print-designer.svg?style=flat-square&logo=npm" alt="NPM Version"></a>
  <a href="https://github.com/0ldFive/Vue-Print-Designer/blob/master/LICENSE"><img src="https://img.shields.io/github/license/0ldFive/Vue-Print-Designer?style=flat-square" alt="License"></a>
  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=n-5GjVjM51eH2XvL71r-R8-72r1A2z0V&jump_from=webapi&authKey=zB6r+Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2"><img border="0" src="https://img.shields.io/badge/QQ%E7%BE%A4-1038069636-blue.svg?style=flat-square&logo=qq" alt="QQ Group" title="QQ Group"></a>
</p>

<p align="center">
    中文 | <a href="https://github.com/0ldFive/Vue-Print-Designer/blob/master/README_EN.md">English</a>
</p>

Vue Print Designer 是一款可视化打印设计器，面向业务表单、标签、票据、快递单等场景，支持模板化、变量化，并提供静默打印与云打印能力，同时兼容多种导出/打印方式。

<h2>在线演示: <a href="https://0ldfive.github.io/Vue-Print-Designer/" target="_blank" rel="noopener noreferrer">https://0ldfive.github.io/Vue-Print-Designer/</a></h2>

## 界面预览

| 设计器主界面与画布视图 | 打印预览 | 打印参数配置 |
| --- | --- | --- |
| <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/1.png" alt="设计器主界面" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/2.png" alt="打印预览" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/3.png" alt="打印参数" width="240" /> |

| 系统设置与偏好 | 快捷键说明 | 高级表格编辑 |
| --- | --- | --- |
| <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/4.png" alt="系统设置" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/5.png" alt="快捷键" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/6.png" alt="高级表格" width="240" /> |

## 集成示例

我们提供了一个基于 **Vue 3 + Element Plus** 的完整集成示例项目，演示如何在实际业务系统中嵌入打印设计器。

| 参数调试 | 设计器 | 暗色模式 |
| --- | --- | --- |
| <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/11.png" alt="集成示例图 11" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/12.png" alt="集成示例图 12" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/13.png" alt="集成示例图 13" width="240" /> |

- **项目地址**：[https://github.com/0ldFive/vue-designer-sample](https://github.com/0ldFive/vue-designer-sample)
- **在线演示**：[https://0ldfive.github.io/vue-designer-sample/#/designer](https://0ldfive.github.io/vue-designer-sample/#/designer)
- **技术栈**：Vue 3, TypeScript, Element Plus, Vite

## 社区交流

欢迎加入 QQ 群一起交流功能使用、二次开发与问题排查。

- QQ 群号：**1038069636**

<p>
    <img src="./docs/images/qq_group.jpg" alt="Vue Print Designer QQ 群二维码（1038069636）" width="120" />
</p>

## 核心特性

- **可视化设计**：全功能拖拽设计器，支持文本/图片/表格/条码/二维码/形状等组件，内置标尺、网格与辅助对齐。
- **智能分页**：自动处理长表格分页，支持表头/表尾重复，无需手写复杂逻辑，所见即所得。
- **跨框架支持**：基于 Web Components，零依赖适配 Vue/React/Angular/原生 HTML 等所有技术栈。
- **全场景打印**：
  - **浏览器打印**：原生预览与打印。
  - **导出**：支持生成 PDF、图片（拼接/分片）。
  - **客户端打印**：支持**静默打印**（无弹窗直打）与**云打印**（远程任务下发）。
- **企业级功能**：支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机/份数/单双面/DPI）。

## 配套打印客户端（PrintDot Client）

PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备发现、连接管理与任务转发，主打“稳定、快速、好上手”。与本项目配合可实现更稳定的本地客户端打印链路。

- 支持平台：Windows / macOS / Linux
- 关键能力：自动发现与识别设备、稳定连接维护与转发队列、轻量后台运行
- 项目地址：https://github.com/0ldFive/PrintDot-Client

| 主界面 - 设备状态与连接管理 | 设置页面 - 偏好与配置选项 |
| --- | --- |
| <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/7.png" alt="PrintDot 主界面" width="140" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/8.png" alt="PrintDot 设置页面" width="140" /> |

<p>
    <a href="https://github.com/0ldFive/PrintDot-Client/releases" target="_blank" rel="noopener noreferrer">⬇ 下载 PrintDot Client</a>
</p>

## 快速开始

### 方式一：下载源码自行改造与集成 API

适合有深度定制需求的团队。

#### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 yarn / pnpm

#### 建议接入点

- 模板 CRUD：`useTemplateStore`（可替换为接口读写）
- 自定义元素 CRUD：`useDesignerStore` 中的 `customElements`
- 变量与模板数据：组件实例方法 `setVariables` / `loadTemplateData`

自定义元素扩展请查看：[自定义元素扩展指南](https://printdot.cc/docs)

### 方式二：npm 组件（Web Components）

适合任何技术栈（Vue/React/Angular/原生）。Web Components 方式**支持 Vue 2**（作为自定义元素使用），无需 Vue 2 组件适配。

详细参数、CRUD 与 JSON 示例请查看：[Web Components API 用户手册](https://printdot.cc/docs)

#### 安装依赖

选择任一包管理器安装依赖：

```bash
npm i vue-print-designer
# 或
pnpm add vue-print-designer
# 或
yarn add vue-print-designer
```

#### 1) 使用组件（Vue 3 / Vite）

在入口文件中引入：

```ts
// main.ts
import 'vue-print-designer';
import 'vue-print-designer/style.css';
```

然后在页面里直接使用自定义元素：

```vue
<template>
    <print-designer id="designer"></print-designer>
</template>
```

#### 2) Vue 3 选项式 API：初始化与调用分离

**设计器页（初始化与编辑）**

```vue
<script lang="ts">
export default {
    mounted() {
        const el = this.$refs.designerRef as any;
        // 初始化品牌与主题
        el.setBranding({ title: '业务打印设计器', showLogo: true });
        el.setTheme('light');
        // 初始化模板或变量
        el.loadTemplateData(/* 从你的 API 获取的数据 */);
        el.setVariables({ orderNo: 'A001' }, { merge: true });
    }
};
</script>

<template>
    <print-designer ref="designerRef"></print-designer>
</template>
```

**业务页面（随处调用打印/导出）**

```ts
// 任何页面中只要能拿到元素实例即可
const el = document.querySelector('print-designer') as any;

// 打印
await el.print({ mode: 'browser' });

// 导出 PDF / 图片 / HTML / Blob
await el.export({ type: 'pdf', filename: 'order-20240223.pdf' });
await el.export({ type: 'html', filename: 'order-20240223.html' });
const pdfBlob = await el.export({ type: 'pdfBlob' });
```

#### 3) 事件回调

```ts
el.addEventListener('ready', () => {});
el.addEventListener('printed', (e) => {});
el.addEventListener('exported', (e) => {
    const blob = e.detail?.blob;
});
el.addEventListener('error', (e) => {
    console.error(e.detail?.scope, e.detail?.error);
});
```



## 项目结构

```
src/
├── assets/               # 静态资源（Logo、图标）
├── components/           # Vue 组件
│   ├── canvas/           # 画布组件
│   ├── common/           # 通用组件（颜色选择器、弹窗等）
│   ├── elements/         # 打印元素组件（文本、图片、表格、条码等）
│   ├── layout/           # 布局组件（头部、侧边栏、属性面板等）
│   ├── print/            # 打印渲染组件
│   └── properties/       # 属性配置组件
├── composables/          # Vue 组合式函数
│   ├── useAutoSave.ts    # 自动保存
│   ├── usePrintSettings.ts # 打印设置
│   └── useTheme.ts       # 主题管理
├── constants/            # 常量定义
├── locales/              # 国际化语言包
├── stores/               # Pinia 状态管理
├── types/                # TypeScript 类型声明
├── utils/                # 工具函数
├── web-component.ts      # Web Components 入口
└── main.ts               # 应用入口
```

## 国际化

项目内置中文（zh）和英文（en）语言支持，默认根据浏览器语言自动切换，也可通过 API 手动设置。

## License

AGPL-3.0-only

品牌与 Logo 使用请遵循 [TRADEMARKS.md](https://github.com/0ldFive/Vue-Print-Designer/blob/master/TRADEMARKS.md)。如需移除或替换品牌标识，请参考 [COMMERCIAL_LICENSE.md](https://github.com/0ldFive/Vue-Print-Designer/blob/master/COMMERCIAL_LICENSE.md)。