编程 Vue Print Designer：可视化打印设计器，支持业务表单、标签、票据、快递单

2026-06-01 22:26:41 +0800 CST views 8

Vue Print Designer：可视化打印设计器，支持业务表单、标签、票据、快递单

标签: Vue / 打印设计器 / 开源 / Web Components / 可视化 / 打印 / 表单设计
原文: 微信公众号「一飞开源」https://mp.weixin.qq.com/s/RjzOAItYThduTW-VPjCV7Q
GitHub: https://github.com/0ldFive/Vue-Print-Designer

核心亮点

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

为什么需要 Vue Print Designer？

在业务系统中，打印需求无处不在：

📋 业务表单：订单、合同、报表
🏷️ 标签打印：商品标签、资产标签
🧾 票据打印：发票、收据、凭证
📦 快递单：物流面单、发货单

传统方案痛点：

❌ 手写 HTML/CSS 打印样式，兼容性差
❌ 分页逻辑复杂，长表格处理麻烦
❌ 不同框架（Vue/React/Angular）需要分别实现
❌ 静默打印、云打印需要额外开发

Vue Print Designer 一站式解决这些问题！

核心特性

1. 可视化设计

全功能拖拽设计器：

支持文本、图片、表格、条码、二维码、形状等组件
内置标尺、网格与辅助对齐
所见即所得（WYSIWYG）

拖拽组件 → 调整位置 → 设置属性 → 预览打印

2. 智能分页

自动处理长表格分页：

✅ 支持表头/表尾重复
✅ 无需手写复杂逻辑
✅ 所见即所得的分页效果

再也不用手动计算分页断点了！

3. 跨框架支持

基于 Web Components：

✅ 零依赖适配 Vue / React / Angular / 原生 HTML
✅ 支持 Vue 2（作为自定义元素使用）
✅ 无需框架适配层

// 任何框架都能用
import 'vue-print-designer'

<vue-print-designer></vue-print-designer>

4. 全场景打印

打印方式	说明
浏览器打印	原生预览与打印
导出 PDF	生成 PDF 文件
导出图片	拼接/分片图片导出
客户端打印	静默打印（无弹窗直打）
云打印	远程任务下发

5. 企业级功能

✅ 自定义纸张大小
✅ API 数据对接
✅ 模板导入导出
✅ 精细打印参数控制（打印机/份数/单双面/DPI）

配套打印客户端（PrintDot Client）

PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备发现、连接管理与任务转发，主打**"稳定、快速、好上手"**。

支持平台

✅ Windows
✅ macOS
✅ Linux

关键能力

自动发现与识别设备
稳定连接维护与转发队列
轻量后台运行

与本项目配合可实现更稳定的本地客户端打印链路。

技术选型

技术	说明
Vue 3	前端框架
Element Plus	UI 组件库
Pinia	状态管理
Web Components	跨框架支持
Wails	桌面客户端（PrintDot Client）
AGPL-3.0	开源协议

快速开始

方式一：下载源码自行改造与集成 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/原生）。

安装依赖

# npm
npm i vue-print-designer

# pnpm
pnpm add vue-print-designer

# yarn
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 手动设置

界面展示

设计器主界面与画布视图

拖拽式设计器主界面
实时画布预览

打印预览

所见即所得的打印预览

打印参数配置

精细的打印参数控制面板

系统设置与偏好

用户偏好设置

快捷键说明

快捷键参考卡片

高级表格编辑

复杂表格编辑能力

集成示例

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

暗色模式

支持暗色主题

总结

如果你：

需要在业务中嵌入可视化打印设计器
希望支持模板化、变量化的打印需求
需要静默打印或云打印能力
使用 Vue/React/Angular 等任何前端框架

Vue Print Designer 值得一试！