@worm-vue3-print/core 1.2.0 → 1.2.1
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 +82 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,6 +29,88 @@ const pages = paginate(bound, measured, options)
|
|
|
29
29
|
const html = generateHtml(pages)
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
+
## 在 Vue 3 项目中使用（与 `@worm-vue3-print/canvas` 配合）
|
|
33
|
+
|
|
34
|
+
`core` 的同构渲染管线由 `@worm-vue3-print/canvas` 的 `PrintHtmlPreview` 组件内部调用，
|
|
35
|
+
浏览器端接入无需直接调用 `core` API。以下配置与仓库 `demo/App.vue` 保持一致：
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import { PrintDesigner, PrintHtmlPreview, createDefaultTemplate } from '@worm-vue3-print/canvas'
|
|
39
|
+
import type { PrintBusinessField, TemplateData } from '@worm-vue3-print/canvas'
|
|
40
|
+
// 设计器内部控件基于原生样式，需全局引入一次
|
|
41
|
+
import '@worm-vue3-print/canvas/native-controls.css'
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
```vue
|
|
45
|
+
<template>
|
|
46
|
+
<PrintDesigner
|
|
47
|
+
ref="designerRef"
|
|
48
|
+
:initial-template="templateData"
|
|
49
|
+
:fields="fields"
|
|
50
|
+
:is-edit="true"
|
|
51
|
+
:load-default-template="loadDefaultTemplate"
|
|
52
|
+
:show-help="true"
|
|
53
|
+
@preview="onPreview"
|
|
54
|
+
@save="onSave"
|
|
55
|
+
/>
|
|
56
|
+
|
|
57
|
+
<!-- 浏览器端免保存预览：直接使用当前画布 JSON + 业务数据 -->
|
|
58
|
+
<Teleport to="body">
|
|
59
|
+
<PrintHtmlPreview
|
|
60
|
+
v-if="previewVisible"
|
|
61
|
+
ref="htmlPreviewRef"
|
|
62
|
+
:template-json="previewTemplateJson"
|
|
63
|
+
:print-data="printData"
|
|
64
|
+
@rendered="(n) => previewPages = n"
|
|
65
|
+
/>
|
|
66
|
+
</Teleport>
|
|
67
|
+
</template>
|
|
68
|
+
|
|
69
|
+
<script setup lang="ts">
|
|
70
|
+
import { ref } from 'vue'
|
|
71
|
+
|
|
72
|
+
const templateData = ref<TemplateData>(/* 初始模板 TemplateData */)
|
|
73
|
+
const fields = ref<PrintBusinessField[]>(/* 业务字段 PrintBusinessField[] */)
|
|
74
|
+
const designerRef = ref<InstanceType<typeof PrintDesigner> | null>(null)
|
|
75
|
+
const previewTemplateJson = ref<Record<string, any> | null>(null)
|
|
76
|
+
|
|
77
|
+
function onPreview() {
|
|
78
|
+
const json = designerRef.value?.getTemplateJson?.()
|
|
79
|
+
if (!json) return
|
|
80
|
+
previewTemplateJson.value = json
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function onSave(json: string) {
|
|
84
|
+
// 宿主持久化模板 JSON
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function loadDefaultTemplate() {
|
|
88
|
+
return createDefaultTemplate()
|
|
89
|
+
}
|
|
90
|
+
</script>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
关键 props / 事件 / 方法：
|
|
94
|
+
|
|
95
|
+
- `initial-template`：初始模板 `TemplateData`；`fields`：业务字段 `PrintBusinessField[]`；`is-edit`：是否编辑态。
|
|
96
|
+
- `load-default-template()`：可选。「加载默认布局」回调（支持异步，返回 null/undefined 视为无
|
|
97
|
+
默认布局）；未注入时工具栏不展示该按钮。
|
|
98
|
+
- `show-help`：帮助入口开关，默认开启，传入 `false` 可关闭帮助按钮与帮助弹框。
|
|
99
|
+
- `getTemplateJson()`：通过 `ref` 获取当前画布模板 JSON，用于预览 / 保存。
|
|
100
|
+
- `@preview` / `@save`：预览与保存事件，具体业务（字段查询、持久化）由宿主实现。
|
|
101
|
+
- 需要服务端 / Node 输出时，直接调用 `core` 的 `bindData` / `paginate` / `generateHtml` 即可。
|
|
102
|
+
|
|
103
|
+
## 相关链接
|
|
104
|
+
|
|
105
|
+
- Gitee：https://gitee.com/liulong_oschina/worm-vue3-print
|
|
106
|
+
- GitHub：https://github.com/worm-longliu/worm-vue3-print
|
|
107
|
+
|
|
108
|
+
抖音码：
|
|
109
|
+
|
|
110
|
+
<p align="center">
|
|
111
|
+
<img src="../../douyin.png" width="180" alt="抖音码" />
|
|
112
|
+
</p>
|
|
113
|
+
|
|
32
114
|
## 开发
|
|
33
115
|
|
|
34
116
|
```bash
|