vue-print-designer 1.6.4 → 1.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -59
- package/dist/{JsBarcode-DdCgp1TA.js → JsBarcode-ClzUTsJN.js} +1 -1
- package/dist/{browser-CRbaxAGo.js → browser-5ECX0KAl.js} +1 -1
- package/dist/{index-BUX1W3sg.js → index-CAlT_HkV.js} +1 -1
- package/dist/print-designer.es.js +1 -1
- package/dist/print-designer.umd.js +5 -5
- package/dist/{web-component-DND8jIX3.js → web-component-VZAWtoFJ.js} +3185 -3115
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
<h1 align="center">Vue Print Designer</h1>
|
|
6
6
|
|
|
7
|
-
<
|
|
7
|
+
<p align="center">可视化打印设计器 · 标签 / 票据 / 表单全场景覆盖 · 静默打印与云打印一体化</p>
|
|
8
|
+
|
|
9
|
+
> **最新优化：** 移除 6 个第三方大包，首次加载体积减少约 **65%**；渲染引擎全链路自研，单页渲染耗时由约 **300 ms 降至 80 ms**（约 −73%）；多语言 2 → **6 种**，浏览器自动适配。
|
|
8
10
|
|
|
9
11
|
<p align="center">
|
|
10
12
|
<a href="https://gitee.com/theGreatOldFive/vue-print-designer/stargazers"><img src="https://gitee.com/theGreatOldFive/vue-print-designer/badge/star.svg?theme=flat" alt="Gitee stars"></a>
|
|
@@ -21,67 +23,105 @@
|
|
|
21
23
|
中文 | <a href="https://github.com/0ldFive/Vue-Print-Designer/blob/master/README_EN.md">English</a>
|
|
22
24
|
</p>
|
|
23
25
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<h2>在线演示: <a href="https://0ldfive.github.io/Vue-Print-Designer/" target="_blank" rel="noopener noreferrer">https://0ldfive.github.io/Vue-Print-Designer/</a></h2>
|
|
26
|
+
---
|
|
27
27
|
|
|
28
|
+
Vue Print Designer 是一款可视化打印设计器，面向业务表单、标签、票据、快递单等场景，支持模板化、变量化，并提供静默打印与云打印能力，同时兼容多种导出与打印方式。
|
|
28
29
|
|
|
29
|
-
|
|
30
|
+
**在线演示：** [https://0ldfive.github.io/Vue-Print-Designer/](https://0ldfive.github.io/Vue-Print-Designer/)
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
| ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
33
|
-
| <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/1.png" alt="设计器主界面" width="160" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/2.png" alt="打印预览" width="160" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/3.png" alt="打印参数" width="160" /> |
|
|
34
|
-
| **系统设置与偏好** | **快捷键说明** | **高级表格编辑** |
|
|
35
|
-
| <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/4.png" alt="系统设置" width="160" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/5.png" alt="快捷键" width="160" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/6.png" alt="高级表格" width="160" /> |
|
|
32
|
+
---
|
|
36
33
|
|
|
37
|
-
##
|
|
34
|
+
## 社区交流
|
|
38
35
|
|
|
39
|
-
|
|
36
|
+
欢迎加入 QQ 群，交流功能使用、二次开发与问题排查。QQ 群号：**1038069636**
|
|
40
37
|
|
|
41
|
-
|
|
42
|
-
| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
43
|
-
| <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/11.png" alt="集成示例图 11" width="160" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/12.png" alt="集成示例图 12" width="160" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/13.png" alt="集成示例图 13" width="160" /> |
|
|
38
|
+
<img src="./docs/images/qq_group.jpg" alt="Vue Print Designer QQ 群二维码（1038069636）" width="120" />
|
|
44
39
|
|
|
45
|
-
|
|
46
|
-
- **在线演示**：[https://0ldfive.github.io/vue-designer-sample/#/designer](https://0ldfive.github.io/vue-designer-sample/#/designer)
|
|
47
|
-
- **技术栈**：Vue 3, TypeScript, Element Plus, Vite
|
|
40
|
+
---
|
|
48
41
|
|
|
49
|
-
##
|
|
50
|
-
|
|
51
|
-
欢迎加入 QQ 群一起交流功能使用、二次开发与问题排查。
|
|
42
|
+
## 界面预览
|
|
52
43
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
<img src="
|
|
57
|
-
|
|
44
|
+
<table width="100%">
|
|
45
|
+
<tr>
|
|
46
|
+
<td align="center" width="33%"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/1.png" alt="设计器主界面" height="180" /></td>
|
|
47
|
+
<td align="center" width="34%"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/2.png" alt="打印预览" height="180" /></td>
|
|
48
|
+
<td align="center" width="33%"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/3.png" alt="打印参数配置" height="180" /></td>
|
|
49
|
+
</tr>
|
|
50
|
+
<tr>
|
|
51
|
+
<td align="center"><b>设计器主界面与画布视图</b></td>
|
|
52
|
+
<td align="center"><b>打印预览</b></td>
|
|
53
|
+
<td align="center"><b>打印参数配置</b></td>
|
|
54
|
+
</tr>
|
|
55
|
+
<tr>
|
|
56
|
+
<td align="center"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/4.png" alt="系统设置" height="180" /></td>
|
|
57
|
+
<td align="center"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/5.png" alt="快捷键说明" height="180" /></td>
|
|
58
|
+
<td align="center"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/6.png" alt="高级表格编辑" height="180" /></td>
|
|
59
|
+
</tr>
|
|
60
|
+
<tr>
|
|
61
|
+
<td align="center"><b>系统设置与偏好</b></td>
|
|
62
|
+
<td align="center"><b>快捷键说明</b></td>
|
|
63
|
+
<td align="center"><b>高级表格编辑</b></td>
|
|
64
|
+
</tr>
|
|
65
|
+
</table>
|
|
66
|
+
|
|
67
|
+
---
|
|
58
68
|
|
|
59
69
|
## 核心特性
|
|
60
70
|
|
|
61
|
-
-
|
|
62
|
-
-
|
|
63
|
-
- **跨框架支持**：基于 Web Components，零依赖适配 Vue/React/Angular
|
|
71
|
+
- **可视化设计**：全功能拖拽设计器，支持文本 / 图片 / 表格 / 条码 / 二维码 / 形状等组件，内置标尺、网格与辅助对齐。
|
|
72
|
+
- **智能分页**：自动处理长表格分页，支持表头 / 表尾重复，无需手写复杂逻辑，所见即所得。
|
|
73
|
+
- **跨框架支持**：基于 Web Components，零依赖适配 Vue / React / Angular / 原生 HTML 等所有技术栈。
|
|
64
74
|
- **全场景打印**：
|
|
65
75
|
- **浏览器打印**：原生预览与打印。
|
|
66
|
-
- **导出**：支持生成 PDF
|
|
76
|
+
- **导出**：支持生成 PDF、图片（拼接 / 分片）。
|
|
67
77
|
- **客户端打印**：支持**静默打印**（无弹窗直打）与**云打印**（远程任务下发）。
|
|
68
|
-
- **企业级功能**：支持自定义纸张、API
|
|
78
|
+
- **企业级功能**：支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机 / 份数 / 单双面 / DPI）。
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## 集成示例
|
|
83
|
+
|
|
84
|
+
基于 **Vue 3 + Element Plus** 的完整集成示例，演示如何在实际业务系统中嵌入打印设计器。
|
|
85
|
+
|
|
86
|
+
<table width="100%">
|
|
87
|
+
<tr>
|
|
88
|
+
<td align="center" width="33%"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/11.png" alt="参数调试" height="180" /></td>
|
|
89
|
+
<td align="center" width="34%"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/12.png" alt="设计器" height="180" /></td>
|
|
90
|
+
<td align="center" width="33%"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/13.png" alt="暗色模式" height="180" /></td>
|
|
91
|
+
</tr>
|
|
92
|
+
<tr>
|
|
93
|
+
<td align="center"><b>参数调试</b></td>
|
|
94
|
+
<td align="center"><b>设计器</b></td>
|
|
95
|
+
<td align="center"><b>暗色模式</b></td>
|
|
96
|
+
</tr>
|
|
97
|
+
</table>
|
|
98
|
+
|
|
99
|
+
- **项目地址**：[https://github.com/0ldFive/vue-designer-sample](https://github.com/0ldFive/vue-designer-sample)
|
|
100
|
+
- **在线演示**：[https://0ldfive.github.io/vue-designer-sample/#/designer](https://0ldfive.github.io/vue-designer-sample/#/designer)
|
|
101
|
+
- **技术栈**：Vue 3, TypeScript, Element Plus, Vite
|
|
102
|
+
|
|
103
|
+
---
|
|
69
104
|
|
|
70
105
|
## 配套打印客户端（PrintDot Client）
|
|
71
106
|
|
|
72
|
-
PrintDot Client 是配套的桌面打印助手（Wails + Vue
|
|
107
|
+
PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备发现、连接管理与任务转发。与本项目配合可实现稳定的本地客户端打印链路。
|
|
73
108
|
|
|
74
|
-
-
|
|
75
|
-
-
|
|
76
|
-
-
|
|
109
|
+
- **支持平台**：Windows / macOS / Linux
|
|
110
|
+
- **关键能力**：自动发现并识别设备、稳定连接维护与转发队列、轻量后台运行
|
|
111
|
+
- **项目地址**：[https://github.com/0ldFive/PrintDot-Client](https://github.com/0ldFive/PrintDot-Client)
|
|
77
112
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
113
|
+
<table width="100%">
|
|
114
|
+
<tr>
|
|
115
|
+
<td align="center" width="50%"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/7.png" alt="PrintDot 主界面" height="180" /></td>
|
|
116
|
+
<td align="center" width="50%"><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/8.png" alt="PrintDot 设置页面" height="180" /></td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr>
|
|
119
|
+
<td align="center"><b>主界面 - 设备状态与连接管理</b></td>
|
|
120
|
+
<td align="center"><b>设置页面 - 偏好与配置选项</b></td>
|
|
121
|
+
</tr>
|
|
122
|
+
</table>
|
|
81
123
|
|
|
82
|
-
|
|
83
|
-
<a href="https://github.com/0ldFive/PrintDot-Client/releases" target="_blank" rel="noopener noreferrer">⬇ 下载 PrintDot Client</a>
|
|
84
|
-
</p>
|
|
124
|
+
---
|
|
85
125
|
|
|
86
126
|
## 快速开始
|
|
87
127
|
|
|
@@ -102,15 +142,13 @@ PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备
|
|
|
102
142
|
|
|
103
143
|
自定义元素扩展请查看：[自定义元素扩展指南](https://printdot.cc/docs)
|
|
104
144
|
|
|
105
|
-
### 方式二：npm 组件（Web Components）
|
|
145
|
+
### 方式二：npm 组件（Web Components）[了解 Web Components](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components)
|
|
106
146
|
|
|
107
|
-
适合任何技术栈（Vue/React/Angular
|
|
147
|
+
适合任何技术栈（Vue / React / Angular / 原生）。Web Components 方式**支持 Vue 2**（作为自定义元素使用），无需 Vue 2 组件适配。
|
|
108
148
|
|
|
109
149
|
详细参数、CRUD 与 JSON 示例请查看：[Web Components API 用户手册](https://printdot.cc/docs)
|
|
110
150
|
|
|
111
|
-
####
|
|
112
|
-
|
|
113
|
-
选择任一包管理器安装依赖：
|
|
151
|
+
#### 安装
|
|
114
152
|
|
|
115
153
|
```bash
|
|
116
154
|
npm i vue-print-designer
|
|
@@ -120,9 +158,7 @@ pnpm add vue-print-designer
|
|
|
120
158
|
yarn add vue-print-designer
|
|
121
159
|
```
|
|
122
160
|
|
|
123
|
-
#### 1)
|
|
124
|
-
|
|
125
|
-
在入口文件中引入：
|
|
161
|
+
#### 1) 在 Vue 3 / Vite 中使用
|
|
126
162
|
|
|
127
163
|
```ts
|
|
128
164
|
// main.ts
|
|
@@ -130,27 +166,23 @@ import "vue-print-designer";
|
|
|
130
166
|
import "vue-print-designer/style.css";
|
|
131
167
|
```
|
|
132
168
|
|
|
133
|
-
然后在页面里直接使用自定义元素：
|
|
134
|
-
|
|
135
169
|
```vue
|
|
136
170
|
<template>
|
|
137
171
|
<print-designer id="designer"></print-designer>
|
|
138
172
|
</template>
|
|
139
173
|
```
|
|
140
174
|
|
|
141
|
-
#### 2) Vue 3 选项式 API
|
|
175
|
+
#### 2) 初始化与调用分离（Vue 3 选项式 API）
|
|
142
176
|
|
|
143
|
-
|
|
177
|
+
**设计器页面（初始化与编辑）**
|
|
144
178
|
|
|
145
179
|
```vue
|
|
146
180
|
<script lang="ts">
|
|
147
181
|
export default {
|
|
148
182
|
mounted() {
|
|
149
183
|
const el = this.$refs.designerRef as any;
|
|
150
|
-
// 初始化品牌与主题
|
|
151
184
|
el.setBranding({ title: "业务打印设计器", showLogo: true });
|
|
152
185
|
el.setTheme("light");
|
|
153
|
-
// 初始化模板或变量
|
|
154
186
|
el.loadTemplateData(/* 从你的 API 获取的数据 */);
|
|
155
187
|
el.setVariables({ orderNo: "A001" }, { merge: true });
|
|
156
188
|
},
|
|
@@ -162,10 +194,9 @@ export default {
|
|
|
162
194
|
</template>
|
|
163
195
|
```
|
|
164
196
|
|
|
165
|
-
|
|
197
|
+
**业务页面（打印 / 导出调用）**
|
|
166
198
|
|
|
167
199
|
```ts
|
|
168
|
-
// 任何页面中只要能拿到元素实例即可
|
|
169
200
|
const el = document.querySelector("print-designer") as any;
|
|
170
201
|
|
|
171
202
|
// 打印
|
|
@@ -177,7 +208,7 @@ await el.export({ type: "html", filename: "order-20240223.html" });
|
|
|
177
208
|
const pdfBlob = await el.export({ type: "pdfBlob" });
|
|
178
209
|
```
|
|
179
210
|
|
|
180
|
-
#### 3)
|
|
211
|
+
#### 3) 事件监听
|
|
181
212
|
|
|
182
213
|
```ts
|
|
183
214
|
el.addEventListener("ready", () => {});
|
|
@@ -190,6 +221,8 @@ el.addEventListener("error", (e) => {
|
|
|
190
221
|
});
|
|
191
222
|
```
|
|
192
223
|
|
|
224
|
+
---
|
|
225
|
+
|
|
193
226
|
## 项目结构
|
|
194
227
|
|
|
195
228
|
```
|
|
@@ -215,7 +248,7 @@ src/ # 项目源码目录
|
|
|
215
248
|
├── stores/ # Pinia 状态管理
|
|
216
249
|
├── types/ # 类型声明
|
|
217
250
|
└── utils/ # 通用工具函数
|
|
218
|
-
├── print.ts #
|
|
251
|
+
├── print.ts # 兼容导出入口
|
|
219
252
|
├── print/ # 打印能力主目录
|
|
220
253
|
│ ├── index.ts # 打印模块统一导出
|
|
221
254
|
│ ├── usePrint.ts # 打印/导出流程编排入口
|
|
@@ -231,10 +264,14 @@ src/ # 项目源码目录
|
|
|
231
264
|
└── ... # 其他通用工具函数
|
|
232
265
|
```
|
|
233
266
|
|
|
267
|
+
---
|
|
268
|
+
|
|
234
269
|
## 国际化
|
|
235
270
|
|
|
236
271
|
项目内置 6 种语言：中文简体（zh）、中文繁体（zh-Hant）、英文（en）、日文（ja）、韩文（ko）、德文（de），默认根据浏览器语言自动检测，也可通过 API 手动设置。
|
|
237
272
|
|
|
273
|
+
---
|
|
274
|
+
|
|
238
275
|
## License
|
|
239
276
|
|
|
240
277
|
AGPL-3.0-only
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { d as defineComponent, h, c as computed, o as onUnmounted, w as watch, s as shallowRef, l as loader, a as onMounted, n as nextTick, r as ref } from "./web-component-
|
|
1
|
+
import { d as defineComponent, h, c as computed, o as onUnmounted, w as watch, s as shallowRef, l as loader, a as onMounted, n as nextTick, r as ref } from "./web-component-VZAWtoFJ.js";
|
|
2
2
|
var __defProp$2 = Object.defineProperty;
|
|
3
3
|
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|