vue-print-designer 1.0.3 → 1.0.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.
Files changed (21) hide show
  1. package/README.md +47 -33
  2. package/dist/JsBarcode-Br751cQs.js +3866 -0
  3. package/dist/browser-B1f9V7ID.js +2153 -0
  4. package/dist/dom-to-image-more.min-C5Et-X3o.js +540 -0
  5. package/dist/html2canvas.esm-DWZSdXKi.js +7795 -0
  6. package/dist/index-CmJhRLZW.js +336 -0
  7. package/dist/index.es-BPOdI9f8.js +10445 -0
  8. package/dist/jspdf.es.min-CHIwRaZm.js +11560 -0
  9. package/dist/jszip.min-CCM6URsy.js +2354 -0
  10. package/dist/print-designer.css +1 -1
  11. package/dist/print-designer.es.js +2 -2
  12. package/dist/print-designer.umd.js +354 -526
  13. package/dist/purify.es-DadB-l2n.js +1029 -0
  14. package/dist/typeof-DxTVrAEz.js +11 -0
  15. package/dist/web-component-DthqWOdU.js +41886 -0
  16. package/dist/web-component.d.ts +34 -8
  17. package/package.json +8 -5
  18. package/dist/html2canvas.esm-dgT_1dIT.js +0 -4871
  19. package/dist/index.es-Ci79IlrF.js +0 -5914
  20. package/dist/purify.es-CKk_t3XZ.js +0 -471
  21. package/dist/web-component-skZY2PxI.js +0 -46663
package/README.md CHANGED
@@ -6,6 +6,15 @@
6
6
 
7
7
  <h1 align="center">Vue Print Designer</h1>
8
8
 
9
+ <p align="center">
10
+ <a href="https://github.com/0ldFive/Vue-Print-Designer/stargazers"><img src="https://img.shields.io/github/stars/0ldFive/Vue-Print-Designer?style=flat-square&logo=github" alt="GitHub stars"></a>
11
+ <a href="https://github.com/0ldFive/Vue-Print-Designer/network/members"><img src="https://img.shields.io/github/forks/0ldFive/Vue-Print-Designer?style=flat-square&logo=github" alt="GitHub forks"></a>
12
+ <a href="https://www.npmjs.com/package/vue-print-designer"><img src="https://img.shields.io/npm/dm/vue-print-designer.svg?style=flat-square&logo=npm" alt="NPM Downloads"></a>
13
+ <a href="https://www.npmjs.com/package/vue-print-designer"><img src="https://img.shields.io/npm/v/vue-print-designer.svg?style=flat-square&logo=npm" alt="NPM Version"></a>
14
+ <a href="https://github.com/0ldFive/Vue-Print-Designer/blob/master/LICENSE"><img src="https://img.shields.io/github/license/0ldFive/Vue-Print-Designer?style=flat-square" alt="License"></a>
15
+ <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=n-5GjVjM51eH2XvL71r-R8-72r1A2z0V&jump_from=webapi&authKey=zB6r+Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2/Q2"><img border="0" src="https://img.shields.io/badge/QQ%E7%BE%A4-1038069636-blue.svg?style=flat-square&logo=qq" alt="QQ Group" title="QQ Group"></a>
16
+ </p>
17
+
9
18
  <p align="center">
10
19
  中文 | <a href="https://github.com/0ldFive/Vue-Print-Designer/blob/master/README_EN.md">English</a>
11
20
  </p>
@@ -16,29 +25,46 @@ Vue Print Designer 是一款可视化打印设计器，面向业务表单、标
16
25
 
17
26
  ## 界面预览
18
27
 
19
- | 界面视图 | 界面视图 | 界面视图 |
28
+ | 设计器主界面与画布视图 | 打印预览 | 打印参数配置 |
29
+ | --- | --- | --- |
30
+ | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/1.png" alt="设计器主界面" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/2.png" alt="打印预览" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/3.png" alt="打印参数" width="240" /> |
31
+
32
+ | 系统设置与偏好 | 快捷键说明 | 高级表格编辑 |
33
+ | --- | --- | --- |
34
+ | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/4.png" alt="系统设置" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/5.png" alt="快捷键" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/6.png" alt="高级表格" width="240" /> |
35
+
36
+ ## 集成示例
37
+
38
+ 我们提供了一个基于 **Vue 3 + Element Plus** 的完整集成示例项目，演示如何在实际业务系统中嵌入打印设计器。
39
+
40
+ | 参数调试 | 设计器 | 暗色模式 |
20
41
  | --- | --- | --- |
21
- | **设计器主界面与画布视图**<br>![设计器主界面](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/1.png) | **打印预览**<br>![打印预览](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/2.png) | **打印参数配置**<br>![打印参数](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/3.png) |
22
- | **系统设置与偏好**<br>![系统设置](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/4.png) | **快捷键说明**<br>![快捷键](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/5.png) | **高级表格编辑**<br>![高级表格](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/6.png) |
42
+ | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/11.png" alt="集成示例图 11" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/12.png" alt="集成示例图 12" width="240" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/13.png" alt="集成示例图 13" width="240" /> |
43
+
44
+ - **项目地址**：[https://github.com/0ldFive/vue-designer-sample](https://github.com/0ldFive/vue-designer-sample)
45
+ - **在线演示**：[https://0ldfive.github.io/vue-designer-sample/#/designer](https://0ldfive.github.io/vue-designer-sample/#/designer)
46
+ - **技术栈**：Vue 3, TypeScript, Element Plus, Vite
47
+
48
+ ## 社区交流
23
49
 
24
- ## 核心特性与优势
50
+ 欢迎加入 QQ 群一起交流功能使用、二次开发与问题排查。
25
51
 
26
- 市面上大多数打印插件要么**强耦合特定框架**，要么**仅提供基础打印功能**。我们专注于解决**分页逻辑复杂**与**集成成本高**的痛点，提供企业级的打印解决方案：
52
+ - QQ 群号：**1038069636**
27
53
 
28
- - **开箱即用**：不同于手写分页逻辑，内置完整的拖拽设计器与预览引擎，自动处理表格分页与表头重复。
29
- - **跨框架支持**：拒绝框架锁定，基于 Web Components，完美适配 Vue/React/Angular/原生 HTML 等所有技术栈。
30
- - **工程化完备**：不仅是打印，更提供静默打印、云打印、PDF/图片导出及精细的打印参数控制。
31
- - **灵活扩展**：支持自定义元素与 API 对接，满足深度业务定制需求。
54
+ <p>
55
+ <img src="./docs/images/qq_group.jpg" alt="Vue Print Designer QQ 群二维码（1038069636）" width="120" />
56
+ </p>
32
57
 
33
- ## 功能亮点
58
+ ## 核心特性
34
59
 
35
- - 拖拽式页面编辑，支持文本、图片、条码、二维码、表格、形状
36
- - 表格自动分页（支持表头/表尾重复）
37
- - 多页面布局、网格/标尺、缩放与对齐工具
38
- - 导出 PDF/图片/Blob，支持拼接/分片
39
- - 打印参数配置：打印机、份数、页范围、单双面、纸张等
40
- - **静默打印**：支持本地客户端直打，无需人工确认
41
- - **云打印**：支持远程客户端接入与云端下发打印任务
60
+ - **可视化设计**：全功能拖拽设计器，支持文本/图片/表格/条码/二维码/形状等组件，内置标尺、网格与辅助对齐。
61
+ - **智能分页**：自动处理长表格分页，支持表头/表尾重复，无需手写复杂逻辑，所见即所得。
62
+ - **跨框架支持**：基于 Web Components，零依赖适配 Vue/React/Angular/原生 HTML 等所有技术栈。
63
+ - **全场景打印**：
64
+ - **浏览器打印**：原生预览与打印。
65
+ - **导出**：支持生成 PDF、图片（拼接/分片）。
66
+ - **客户端打印**：支持**静默打印**（无弹窗直打）与**云打印**（远程任务下发）。
67
+ - **企业级功能**：支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机/份数/单双面/DPI）。
42
68
 
43
69
  ## 配套打印客户端（PrintDot Client）
44
70
 
@@ -48,9 +74,9 @@ PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备
48
74
  - 关键能力：自动发现与识别设备、稳定连接维护与转发队列、轻量后台运行
49
75
  - 项目地址：https://github.com/0ldFive/PrintDot-Client
50
76
 
51
- | 初始界面 | 偏好设置 |
77
+ | 主界面 - 设备状态与连接管理 | 设置页面 - 偏好与配置选项 |
52
78
  | --- | --- |
53
- | **主界面 - 设备状态与连接管理**<br><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/7.png" alt="PrintDot 主界面" width="220" /> | **设置页面 - 偏好与配置选项**<br><img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/8.png" alt="PrintDot 设置页面" width="220" /> |
79
+ | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/7.png" alt="PrintDot 主界面" width="140" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/8.png" alt="PrintDot 设置页面" width="140" /> |
54
80
 
55
81
  <p>
56
82
  <a href="https://github.com/0ldFive/PrintDot-Client/releases" target="_blank" rel="noopener noreferrer">⬇ 下载 PrintDot Client</a>
@@ -73,13 +99,13 @@ PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备
73
99
  - 自定义元素 CRUD：`useDesignerStore` 中的 `customElements`
74
100
  - 变量与模板数据：组件实例方法 `setVariables` / `loadTemplateData`
75
101
 
76
- 自定义元素扩展请查看：[自定义元素扩展指南](https://github.com/0ldFive/Vue-Print-Designer/blob/master/docs/zh/guide/custom-element.md)
102
+ 自定义元素扩展请查看：[自定义元素扩展指南](https://printdot.cc/docs)
77
103
 
78
104
  ### 方式二：npm 组件（Web Components）
79
105
 
80
106
  适合任何技术栈（Vue/React/Angular/原生）。Web Components 方式**支持 Vue 2**（作为自定义元素使用），无需 Vue 2 组件适配。
81
107
 
82
- 详细参数、CRUD 与 JSON 示例请查看：[Web Components API 用户手册](https://github.com/0ldFive/Vue-Print-Designer/blob/master/docs/zh/guide/web-components-guide.md)
108
+ 详细参数、CRUD 与 JSON 示例请查看：[Web Components API 用户手册](https://printdot.cc/docs)
83
109
 
84
110
  #### 安装依赖
85
111
 
@@ -162,19 +188,7 @@ el.addEventListener('error', (e) => {
162
188
  });
163
189
  ```
164
190
 
165
- #### 4) 集成示例
166
-
167
- 我们提供了一个基于 **Vue 3 + Element Plus** 的完整集成示例项目，演示如何在实际业务系统中嵌入打印设计器。
168
-
169
- <p align="left">
170
- <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/11.png" alt="集成示例图 11" width="240" />
171
- <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/12.png" alt="集成示例图 12" width="240" />
172
- <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/13.png" alt="集成示例图 13" width="240" />
173
- </p>
174
191
 
175
- - **项目地址**：[https://github.com/0ldFive/vue-designer-sample](https://github.com/0ldFive/vue-designer-sample)
176
- - **在线演示**：[https://0ldfive.github.io/vue-designer-sample/#/designer](https://0ldfive.github.io/vue-designer-sample/#/designer)
177
- - **技术栈**：Vue 3, TypeScript, Element Plus, Vite
178
192
 
179
193
  ## 项目结构
180
194