vue-print-designer

v1.6.91

Published

4 hours ago

Downloads

8,494

0High
0Medium
0Low

jonny-xiang

最新优化： 移除 6 个第三方大包，首次加载体积减少约 65%；渲染引擎全链路自研，单页渲染耗时由约 300 ms 降至 80 ms（约 −73%）；多语言 2 → 6 种，浏览器自动适配。

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

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

社区交流

欢迎加入 QQ 群，交流功能使用、二次开发与问题排查。QQ 群号：1038069636

界面预览

核心特性

可视化设计：全功能拖拽设计器，支持文本 / 图片 / 表格 / 条码 / 二维码 / 形状等组件，内置标尺、网格与辅助对齐。
智能分页：自动处理长表格分页，支持表头 / 表尾重复，无需手写复杂逻辑，所见即所得。
跨框架支持：基于 Web Components，零依赖适配 Vue / React / Angular / 原生 HTML 等所有技术栈。
全场景打印：
- 浏览器打印：原生预览与打印。
- 导出：支持生成 PDF、图片（拼接 / 分片）。
- 客户端打印：支持静默打印（无弹窗直打）与云打印（远程任务下发）。
企业级功能：支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机 / 份数 / 单双面 / DPI）。

集成示例

基于 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

配套打印客户端（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）了解 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/                      # 项目源码目录
├── 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 渲染实现
    └── ...               # 其他通用工具函数

国际化

项目内置 6 种语言：中文简体（zh）、中文繁体（zh-Hant）、英文（en）、日文（ja）、韩文（ko）、德文（de），默认根据浏览器语言自动检测，也可通过 API 手动设置。

License

AGPL-3.0-only

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