简介
前端业务中常遇到打印需求，手写分页逻辑繁琐且跨框架适配困难。Vue Print Designer 是一款面向业务表单、标签、票据、快递单等打印场景的可视化设计器，核心主打模板化、变量化设计，支持静默打印、云打印能力及 PDF / 图片 / Blob 等多种导出方式。
项目地址：https://gitee.com/theGreatOldFive/vue-print-designer 在线演示：https://0ldfive.github.io/Vue-Print-Designer/
核心优势
市面上的打印插件要么强耦合单一框架，要么只提供基础触发功能。Vue Print Designer 解决了分页逻辑复杂、集成成本高、跨框架适配难的问题。
1. 开箱即用，告别手写分页
内置完整的拖拽式设计器和预览引擎，表格能自动分页还支持表头 / 表尾重复。设计器里的标尺、网格、对齐工具也很贴心，所见即所得。
2. 跨框架兼容，拒绝技术栈锁定
基于 Web Components 开发，不只是 Vue 项目能用，React、Angular 甚至原生 HTML 项目都能无缝集成，连 Vue2 都能直接作为自定义元素使用。
3. 工程化完备，打印能力拉满
提供静默打印（本地客户端直打）、云打印（远程客户端接入），搭配配套的桌面打印助手 PrintDot Client，还能实现设备自动发现、打印任务转发。支持 PDF、图片、Blob 格式，还能实现拼接 / 分片导出。
4. 灵活扩展，满足定制化业务需求
支持自定义设计元素，通过 API 对接业务系统，比如模板的增删改查、自定义元素管理、动态绑定变量数据。
核心功能亮点
- 拖拽式可视化设计：支持文本、图片、条码、二维码、表格、形状等常用元素。
- 精细化布局工具：多页面布局、网格 / 标尺辅助、缩放 / 对齐工具。
- 智能表格处理：表格自动分页 + 表头 / 表尾重复。
- 丰富的打印配置：可自定义打印机、打印份数、页范围、单双面、纸张尺寸等参数。
- 多格式导出：PDF / 图片 / Blob 任意选，支持拼接 / 分片。
- 国际化支持：内置中文、英文，默认跟随浏览器语言。
配套桌面客户端：PrintDot Client 支持 Windows/macOS/Linux，实现设备管理、任务转发。
快速上手
环境要求：Node.js >=16.0.0、npm >=7.0.0。
方式一：npm 安装 Web Components 包
npm i vue-print-designer
Vue3/Vite 项目快速使用
入口文件 main.ts 引入：
import 'vue-print-designer'; import 'vue-print-designer/style.css';
页面中直接使用自定义元素：
<template>
<print-designer></print-designer>
</template>
API 初始化模板、绑定变量、触发打印 / 导出：
// 初始化模板和变量
const el = document.querySelector('print-designer') as any;
el.loadTemplateData(/* 从后端获取的模板数据 */);
el.setVariables({ orderNo: 'A001', userName: '张三' }, { merge: true });
// 浏览器打印
await el.print({ mode: 'browser' });
// 导出 PDF
await el.export({ type: 'pdf', filename: '订单打印.pdf' });
方式二：下载源码深度定制
如需自定义设计元素、对接企业内部的模板管理系统，可直接克隆源码改造。
- 模板 CRUD：基于
useTemplateStore替换为企业接口； - 自定义元素：修改
useDesignerStore中的customElements； - 动态变量：通过
setVariables/loadTemplateData对接业务数据。
源码开发 / 构建命令：
# 安装依赖
npm install
# 开发模式
npm run dev
# 生产构建
npm run build
# 构建 Web Components 包
npm run build:wc
项目结构
项目基于 Vue3 + TypeScript + Vite 开发，代码结构模块化。
src/
├── assets/ # 静态资源
├── components/ # 核心组件
├── composables/ # 组合式函数
├── constants/ # 常量定义
├── locales/ # 国际化语言包
├── stores/ # Pinia 状态管理
├── types/ # TypeScript 类型声明
├── utils/ # 工具函数
├── web-component.ts # Web Components 入口
└── main.ts # 应用入口
总结
Vue Print Designer 是一款兼顾易用性和扩展性的打印设计器，解决了前端打印的核心痛点 —— 分页逻辑和跨框架适配。目前项目还在持续迭代更新，社区维护积极。适合小项目快速实现打印功能，或企业级项目的定制化打印解决方案。
