# Vue-Print-Designer **Repository Path**: widthunkon/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**: 101 - **Created**: 2026-06-02 - **Last Updated**: 2026-06-02 ## 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/

## 界面预览 | 设计器主界面与画布视图 | 打印预览 | 打印参数配置 | | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | | 设计器主界面

| ## 集成示例我们提供了一个基于 **Vue 3 + Element Plus** 的完整集成示例项目，演示如何在实际业务系统中嵌入打印设计器。 | 参数调试 | 设计器 | 暗色模式 | | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | | 集成示例图 11

| - **项目地址**：[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**

Vue Print Designer QQ 群二维码（1038069636）

## 核心特性 - **可视化设计**：全功能拖拽设计器，支持文本/图片/表格/条码/二维码/形状等组件，内置标尺、网格与辅助对齐。 - **智能分页**：自动处理长表格分页，支持表头/表尾重复，无需手写复杂逻辑，所见即所得。 - **跨框架支持**：基于 Web Components，零依赖适配 Vue/React/Angular/原生 HTML 等所有技术栈。 - **全场景打印**： - **浏览器打印**：原生预览与打印。 - **导出**：支持生成 PDF、图片（拼接/分片）。 - **客户端打印**：支持**静默打印**（无弹窗直打）与**云打印**（远程任务下发）。 - **企业级功能**：支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机/份数/单双面/DPI）。 ## 配套打印客户端（PrintDot Client） PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备发现、连接管理与任务转发，主打“稳定、快速、好上手”。与本项目配合可实现更稳定的本地客户端打印链路。 - 支持平台：Windows / macOS / Linux - 关键能力：自动发现与识别设备、稳定连接维护与转发队列、轻量后台运行 - 项目地址：https://github.com/0ldFive/PrintDot-Client | 主界面 - 设备状态与连接管理 | 设置页面 - 偏好与配置选项 | | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | PrintDot 主界面

⬇ 下载 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）适合任何技术栈（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)。