Vue Print Designer

中文 | English

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

在线演示: https://0ldfive.github.io/Vue-Print-Designer/

界面预览

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

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

社区交流

欢迎加入 QQ 群一起交流功能使用、二次开发与问题排查。

• QQ 群号：1038069636

核心特性与功能亮点

多数打印插件要么框架耦合重，要么功能偏基础。我们聚焦复杂分页与低成本集成，提供企业级打印方案：

• 开箱即用：不同于手写分页逻辑，内置完整的拖拽设计器与预览引擎，自动处理表格分页与表头重复。

• 跨框架支持：拒绝框架锁定，基于 Web Components，完美适配 Vue/React/Angular/原生 HTML 等所有技术栈。

• 工程化完备：不仅是打印，更提供静默打印、云打印、PDF/图片导出及精细的打印参数控制。

• 灵活扩展：支持自定义元素与 API 对接，满足深度业务定制需求。

• 拖拽式页面编辑，支持文本、图片、条码、二维码、表格、形状

• 表格自动分页（支持表头/表尾重复）

• 多页面布局、网格/标尺、缩放与对齐工具

• 导出 PDF/图片/Blob，支持拼接/分片

• 打印参数配置：打印机、份数、页范围、单双面、纸张等

• 静默打印：支持本地客户端直打，无需人工确认

• 云打印：支持远程客户端接入与云端下发打印任务

配套打印客户端（PrintDot Client）

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

• 支持平台：Windows / macOS / Linux
• 关键能力：自动发现与识别设备、稳定连接维护与转发队列、轻量后台运行
• 项目地址：https://github.com/0ldFive/PrintDot-Client

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

⬇ 下载 PrintDot Client

快速开始

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

1) 使用组件（Vue 3 / Vite）

在入口文件中引入：

// main.ts
import 'vue-print-designer';
import 'vue-print-designer/style.css';

然后在页面里直接使用自定义元素：

<template>
    <print-designer id="designer"></print-designer>
</template>

2) Vue 3 选项式 API：初始化与调用分离

设计器页（初始化与编辑）

<script lang="ts">
export default {
    mounted() {
        const el = this.$refs.designerRef as any;
        // 初始化品牌与主题
        el.setBranding({ title: '业务打印设计器', showLogo: true });
        el.setTheme('light');
        // 初始化模板或变量
        el.loadTemplateData(/* 从你的 API 获取的数据 */);
        el.setVariables({ orderNo: 'A001' }, { merge: true });
    }
};
</script>

<template>
    <print-designer ref="designerRef"></print-designer>
</template>

业务页面（随处调用打印/导出）

// 任何页面中只要能拿到元素实例即可
const el = document.querySelector('print-designer') as any;

// 打印
await el.print({ mode: 'browser' });

// 导出 PDF / 图片 / Blob
await el.export({ type: 'pdf', filename: 'order-20240223.pdf' });
const pdfBlob = await el.export({ type: 'pdfBlob' });

3) 事件回调

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);
});

4) 集成示例

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

• 项目地址：https://github.com/0ldFive/vue-designer-sample
• 在线演示：https://0ldfive.github.io/vue-designer-sample/#/designer
• 技术栈：Vue 3, TypeScript, Element Plus, Vite

项目结构

src/
├── assets/               # 静态资源（Logo、图标）
├── components/           # Vue 组件
│   ├── canvas/           # 画布组件
│   ├── common/           # 通用组件（颜色选择器、弹窗等）
│   ├── elements/         # 打印元素组件（文本、图片、表格、条码等）
│   ├── layout/           # 布局组件（头部、侧边栏、属性面板等）
│   ├── print/            # 打印渲染组件
│   └── properties/       # 属性配置组件
├── composables/          # Vue 组合式函数
│   ├── useAutoSave.ts    # 自动保存
│   ├── usePrintSettings.ts # 打印设置
│   └── useTheme.ts       # 主题管理
├── constants/            # 常量定义
├── locales/              # 国际化语言包
├── stores/               # Pinia 状态管理
├── types/                # TypeScript 类型声明
├── utils/                # 工具函数
├── web-component.ts      # Web Components 入口
└── main.ts               # 应用入口

国际化

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

License

AGPL-3.0-only

品牌与 Logo 使用请遵循 TRADEMARKS.md。如需移除或替换品牌标识，请参考 COMMERCIAL_LICENSE.md。