[开源]一款可视化打印设计器,面向业务表单、标签、票据、快递单等场景

一飞开源，介绍创意、新奇、有趣、实用的开源/AI应用、系统、软件、硬件及技术，一个探索、发现、分享、使用与互动交流的开源/AI技术社区平台。致力于打造活力开源/AI社区，共建开源新生态！

一、开源项目简介

Vue Print Designer

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

二、开源协议

使用AGPL-3.0开源协议

三、界面展示

界面预览

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

系统设置与偏好	快捷键说明	高级表格编辑

集成示例

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

参数调试	设计器	暗色模式

配套打印客户端（PrintDot Client）

主界面 – 设备状态与连接管理	设置页面 – 偏好与配置选项

四、功能概述

核心特性

可视化设计

全功能拖拽设计器，支持文本/图片/表格/条码/二维码/形状等组件，内置标尺、网格与辅助对齐。
智能分页

自动处理长表格分页，支持表头/表尾重复，无需手写复杂逻辑，所见即所得。
跨框架支持

基于 Web Components，零依赖适配 Vue/React/Angular/原生 HTML 等所有技术栈。
全场景打印

浏览器打印：原生预览与打印。导出：支持生成 PDF、图片（拼接/分片）。客户端打印：支持静默打印（无弹窗直打）与云打印（远程任务下发）。
企业级功能

支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机/份数/单双面/DPI）。

配套打印客户端（PrintDot Client）

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

支持平台：Windows / macOS / Linux
关键能力：自动发现与识别设备、稳定连接维护与转发队列、轻量后台运行

五、技术选型

快速开始

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

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

环境要求

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

建议接入点

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

自定义元素扩展请查看：自定义元素扩展指南

方式二：npm 组件（Web Components）

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

详细参数、CRUD 与 JSON 示例请查看：Web Components API 用户手册

安装依赖

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

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

项目结构

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 渲染实现    └── ...               # 其他通用工具函数

国际化

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

六、源码地址

开源项目地址：

https://github.com/0ldFive/Vue-Print-Designer

访问一飞开源：https://code.exmay.com/