# Vue-Print-Designer
**Repository Path**: anydev/Vue-Print-Designer
## Basic Information
- **Project Name**: Vue-Print-Designer
- **Description**: Vue Print Designer 是一款可视化打印设计器，面向业务表单、标签、票据、快递单等场景，支持模板化、变量化，并提供静默打印与云打印能力，同时兼容多种导出/打印方式。
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: https://printdot.cc/
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-16
- **Last Updated**: 2026-06-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Vue Print Designer
可视化打印设计器 · 标签 / 票据 / 表单全场景覆盖 · 静默打印与云打印一体化
> **最新优化：** 移除 6 个第三方大包，首次加载体积减少约 **65%**；渲染引擎全链路自研，单页渲染耗时由约 **300 ms 降至 80 ms**（约 −73%）；多语言 2 → **6 种**，浏览器自动适配。
中文 | English
---
Vue Print Designer 是一款可视化打印设计器，面向业务表单、标签、票据、快递单等场景，支持模板化、变量化，并提供静默打印与云打印能力，同时兼容多种导出与打印方式。
**在线演示：** [https://0ldfive.github.io/Vue-Print-Designer/](https://0ldfive.github.io/Vue-Print-Designer/)
---
## 社区交流
欢迎加入 QQ 群，交流功能使用、二次开发与问题排查。QQ 群号：**1038069636**
---
## 界面预览
 |
 |
 |
| 设计器主界面与画布视图 |
打印预览 |
打印参数配置 |
 |
 |
 |
| 系统设置与偏好 |
快捷键说明 |
高级表格编辑 |
---
## 核心特性
- **可视化设计**：全功能拖拽设计器，支持文本 / 图片 / 表格 / 条码 / 二维码 / 形状等组件，内置标尺、网格与辅助对齐。
- **智能分页**：自动处理长表格分页，支持表头 / 表尾重复，无需手写复杂逻辑，所见即所得。
- **跨框架支持**：基于 Web Components，零依赖适配 Vue / React / Angular / 原生 HTML 等所有技术栈。
- **全场景打印**：
- **浏览器打印**：原生预览与打印。
- **导出**：支持生成 PDF、图片（拼接 / 分片）。
- **客户端打印**：支持**静默打印**（无弹窗直打）与**云打印**（远程任务下发）。
- **企业级功能**：支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机 / 份数 / 单双面 / DPI）。
---
## 集成示例
基于 **Vue 3 + Element Plus** 的完整集成示例，演示如何在实际业务系统中嵌入打印设计器。
- **项目地址**：[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
---
## 配套打印客户端（PrintDot Client）
PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备发现、连接管理与任务转发。与本项目配合可实现稳定的本地客户端打印链路。
- **支持平台**：Windows / macOS / Linux
- **关键能力**：自动发现并识别设备、稳定连接维护与转发队列、轻量后台运行
- **项目地址**：[https://github.com/0ldFive/PrintDot-Client](https://github.com/0ldFive/PrintDot-Client)
 |
 |
| 主界面 - 设备状态与连接管理 |
设置页面 - 偏好与配置选项 |
---
## 快速开始
### 方式一：下载源码自行改造与集成 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）[了解 Web Components](https://developer.mozilla.org/zh-CN/docs/Web/API/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
```
#### 2) 初始化与调用分离（Vue 3 选项式 API）
**设计器页面（初始化与编辑）**
```vue
```
**业务页面（打印 / 导出调用）**
```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/ # 项目源码目录
├── App.vue # 应用根组件
├── main.ts # 应用启动入口
├── style.css # 全局样式
├── web-component.ts # Web Components 注册入口
├── web-component.d.ts # Web Components 类型声明
├── vite-env.d.ts # Vite 环境类型声明
├── assets/ # 静态资源
├── components/ # 页面与编辑器组件
│ ├── PrintDesigner.vue # 设计器主容器组件
│ ├── canvas/ # 画布区域组件
│ ├── common/ # 通用组件（弹窗、选择器等）
│ ├── elements/ # 打印元素组件（文本、图片、表格等）
│ ├── layout/ # 布局组件（头部、侧栏、面板等）
│ ├── print/ # 打印渲染组件
│ └── properties/ # 属性配置组件
├── composables/ # 组合式状态与行为封装
├── constants/ # 常量定义
├── locales/ # 国际化语言包
├── stores/ # Pinia 状态管理
├── types/ # 类型声明
└── utils/ # 通用工具函数
├── print.ts # 兼容导出入口
├── print/ # 打印能力主目录
│ ├── index.ts # 打印模块统一导出
│ ├── usePrint.ts # 打印/导出流程编排入口
│ ├── dom.ts # 打印相关 DOM 处理工具
│ ├── printChannel.ts # 本地/远程打印通道
│ ├── renderEngine.ts # 渲染引擎兼容导出入口
│ └── renderEngine/ # 渲染引擎子模块目录
│ ├── index.ts # 渲染引擎装配入口
│ ├── types.ts # 渲染模块共享类型
│ ├── pagination.ts # 分页算法与布局修正
│ ├── iframeRenderer.ts # iframe 渲染实现
│ └── imageRenderer.ts # 图片/PDF 渲染实现
└── ... # 其他通用工具函数
```
---
## 国际化
项目内置 6 种语言：中文简体（zh）、中文繁体（zh-Hant）、英文（en）、日文（ja）、韩文（ko）、德文（de），默认根据浏览器语言自动检测，也可通过 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)。 
