vue-print-designer 1.0.39 → 1.0.52

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 (20) hide show
  1. package/README.md +36 -33
  2. package/dist/JsBarcode-D2SE3l-O.js +3866 -0
  3. package/dist/browser-CkNoftEj.js +2153 -0
  4. package/dist/dom-to-image-wrapper-Dzcr21W1.js +517 -0
  5. package/dist/html2canvas.esm-DWZSdXKi.js +7795 -0
  6. package/dist/index-N-tJVHZG.js +336 -0
  7. package/dist/index.es-BCC-t_C0.js +10433 -0
  8. package/dist/jspdf.es.min-CKNMQYNb.js +11545 -0
  9. package/dist/jszip.min-BVgQhm29.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 +346 -499
  13. package/dist/purify.es-BeUEW3Ug.js +1021 -0
  14. package/dist/typeof-DxTVrAEz.js +11 -0
  15. package/dist/web-component-DV8nLjNf.js +35669 -0
  16. package/package.json +5 -2
  17. package/dist/html2canvas.esm-dgT_1dIT.js +0 -4871
  18. package/dist/index.es-BF4kHpvG.js +0 -5914
  19. package/dist/purify.es-CRlZ0Imf.js +0 -553
  20. package/dist/web-component-ev1TCp0Z.js +0 -49105
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>
@@ -18,11 +27,23 @@ Vue Print Designer 是一款可视化打印设计器，面向业务表单、标
18
27
 
19
28
  | 设计器主界面与画布视图 | 打印预览 | 打印参数配置 |
20
29
  | --- | --- | --- |
21
- | ![设计器主界面](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/1.png) | ![打印预览](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/2.png) | ![打印参数](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/3.png) |
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" /> |
22
31
 
23
32
  | 系统设置与偏好 | 快捷键说明 | 高级表格编辑 |
24
33
  | --- | --- | --- |
25
- | ![系统设置](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/4.png) | ![快捷键](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/5.png) | ![高级表格](https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/6.png) |
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
+ | 参数调试 | 设计器 | 暗色模式 |
41
+ | --- | --- | --- |
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
26
47
 
27
48
  ## 社区交流
28
49
 
@@ -31,25 +52,19 @@ Vue Print Designer 是一款可视化打印设计器，面向业务表单、标
31
52
  - QQ 群号：**1038069636**
32
53
 
33
54
  <p>
34
- <img src="./docs/images/qq_group.jpg" alt="Vue Print Designer QQ 群二维码（1038069636）" width="160" />
55
+ <img src="./docs/images/qq_group.jpg" alt="Vue Print Designer QQ 群二维码（1038069636）" width="120" />
35
56
  </p>
36
57
 
37
- ## 核心特性与功能亮点
38
-
39
- 多数打印插件要么框架耦合重，要么功能偏基础。我们聚焦复杂分页与低成本集成，提供企业级打印方案：
40
-
41
- - **开箱即用**：不同于手写分页逻辑，内置完整的拖拽设计器与预览引擎，自动处理表格分页与表头重复。
42
- - **跨框架支持**：拒绝框架锁定，基于 Web Components，完美适配 Vue/React/Angular/原生 HTML 等所有技术栈。
43
- - **工程化完备**：不仅是打印，更提供静默打印、云打印、PDF/图片导出及精细的打印参数控制。
44
- - **灵活扩展**：支持自定义元素与 API 对接，满足深度业务定制需求。
58
+ ## 核心特性
45
59
 
46
- - 拖拽式页面编辑，支持文本、图片、条码、二维码、表格、形状
47
- - 表格自动分页（支持表头/表尾重复）
48
- - 多页面布局、网格/标尺、缩放与对齐工具
49
- - 导出 PDF/图片/Blob，支持拼接/分片
50
- - 打印参数配置：打印机、份数、页范围、单双面、纸张等
51
- - **静默打印**：支持本地客户端直打，无需人工确认
52
- - **云打印**：支持远程客户端接入与云端下发打印任务
60
+ - **可视化设计**：全功能拖拽设计器，支持文本/图片/表格/条码/二维码/形状等组件，内置标尺、网格与辅助对齐。
61
+ - **智能分页**：自动处理长表格分页，支持表头/表尾重复，无需手写复杂逻辑，所见即所得。
62
+ - **跨框架支持**：基于 Web Components，零依赖适配 Vue/React/Angular/原生 HTML 等所有技术栈。
63
+ - **全场景打印**：
64
+ - **浏览器打印**：原生预览与打印。
65
+ - **导出**：支持生成 PDF、图片（拼接/分片）。
66
+ - **客户端打印**：支持**静默打印**（无弹窗直打）与**云打印**（远程任务下发）。
67
+ - **企业级功能**：支持自定义纸张、API 数据对接、模板导入导出及精细的打印参数控制（打印机/份数/单双面/DPI）。
53
68
 
54
69
  ## 配套打印客户端（PrintDot Client）
55
70
 
@@ -61,7 +76,7 @@ PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备
61
76
 
62
77
  | 主界面 - 设备状态与连接管理 | 设置页面 - 偏好与配置选项 |
63
78
  | --- | --- |
64
- | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/7.png" alt="PrintDot 主界面" width="180" /> | <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/8.png" alt="PrintDot 设置页面" width="180" /> |
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" /> |
65
80
 
66
81
  <p>
67
82
  <a href="https://github.com/0ldFive/PrintDot-Client/releases" target="_blank" rel="noopener noreferrer">⬇ 下载 PrintDot Client</a>
@@ -84,13 +99,13 @@ PrintDot Client 是配套的桌面打印助手（Wails + Vue），用于设备
84
99
  - 自定义元素 CRUD：`useDesignerStore` 中的 `customElements`
85
100
  - 变量与模板数据：组件实例方法 `setVariables` / `loadTemplateData`
86
101
 
87
- 自定义元素扩展请查看：[自定义元素扩展指南](https://github.com/0ldFive/Vue-Print-Designer/blob/master/docs/zh/guide/custom-element.md)
102
+ 自定义元素扩展请查看：[自定义元素扩展指南](https://printdot.cc/docs)
88
103
 
89
104
  ### 方式二：npm 组件（Web Components）
90
105
 
91
106
  适合任何技术栈（Vue/React/Angular/原生）。Web Components 方式**支持 Vue 2**（作为自定义元素使用），无需 Vue 2 组件适配。
92
107
 
93
- 详细参数、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)
94
109
 
95
110
  #### 安装依赖
96
111
 
@@ -173,19 +188,7 @@ el.addEventListener('error', (e) => {
173
188
  });
174
189
  ```
175
190
 
176
- #### 4) 集成示例
177
-
178
- 我们提供了一个基于 **Vue 3 + Element Plus** 的完整集成示例项目，演示如何在实际业务系统中嵌入打印设计器。
179
-
180
- <p align="left">
181
- <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/11.png" alt="集成示例图 11" width="240" />
182
- <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/12.png" alt="集成示例图 12" width="240" />
183
- <img src="https://raw.githubusercontent.com/0ldFive/Vue-Print-Designer/master/docs/images/13.png" alt="集成示例图 13" width="240" />
184
- </p>
185
191
 
186
- - **项目地址**：[https://github.com/0ldFive/vue-designer-sample](https://github.com/0ldFive/vue-designer-sample)
187
- - **在线演示**：[https://0ldfive.github.io/vue-designer-sample/#/designer](https://0ldfive.github.io/vue-designer-sample/#/designer)
188
- - **技术栈**：Vue 3, TypeScript, Element Plus, Vite
189
192
 
190
193
  ## 项目结构
191
194