vue-print-designer

v1.1.1

Published

14 hours ago

0High
0Medium
0Low

jonny-xiang

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

界面预览

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

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

集成示例

我们提供了一个基于 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

社区交流

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

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

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

快速开始

方式一：下载源码自行改造与集成 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 / 图片 / 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) 事件回调

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/
├── 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。