yh-hiprint 2.5.3 → 3.0.0
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/HiprintDesigner.vue +21 -197
- package/config.json +399 -0
- package/doc.md +265 -0
- package/hooks/useHipirntCanvas.ts +3 -0
- package/hooks/{useHiprint.js → useHiprint.ts} +92 -41
- package/{index.js → index.ts} +67 -21
- package/libs/hiprint.bundle.js +1 -2
- package/libs/previewHiprint.ts +55 -0
- package/package.json +3 -13
- package/store/defaultPrintElement.ts +152 -0
- package/store/useHiprintStore.ts +75 -0
- package/types.ts +756 -0
- package/index.d.ts +0 -377
package/doc.md
ADDED
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
# 面板对象
|
|
2
|
+
|
|
3
|
+
```js
|
|
4
|
+
var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
#### options
|
|
8
|
+
| 名称 | 类型 | 描述 |
|
|
9
|
+
| --- | --- | --- |
|
|
10
|
+
| width | number | `毫米` 打印纸质宽度 |
|
|
11
|
+
| height | number | `毫米` 打印纸质高度 |
|
|
12
|
+
| paperHeader | number | `pt磅 1in = 2.54cm = 25.4 mm = 72pt = 6pc` 页眉线（缺省值=0） |
|
|
13
|
+
| paperFooter | number | `pt磅 1in = 2.54cm = 25.4 mm = 72pt = 6pc` 页尾线（缺省值=纸张底部） |
|
|
14
|
+
| paperFooter | number | `pt磅 1in = 2.54cm = 25.4 mm = 72pt = 6pc` 页尾线（缺省值=纸张底部） |
|
|
15
|
+
| paperNumberDisabled | boolean | 禁用页码（缺省值=false） 打印设计 双击页码则切换状态 |
|
|
16
|
+
| paperNumberFormat | string | 页码格式（缺省值paperNo-paperCount） |
|
|
17
|
+
| panelPaperRule | string | 面板打印纸张规则 <br>odd:打印纸张保持奇数 <br>even:打印纸张保持偶数 |
|
|
18
|
+
| firstPaperFooter | number | 首页页尾线位置 |
|
|
19
|
+
| evenPaperFooter | number | 偶数页页尾线位置 |
|
|
20
|
+
| oddPaperFooter | number | 奇数页页尾线位置 |
|
|
21
|
+
| lastPaperFooter | number | 尾页页尾线位置 |
|
|
22
|
+
| leftOffset | number | 打印左偏移量 <br>template.print(data,{leftOffset:-1}) 将覆盖面板的左偏移 <br>template.getHtml(data,{leftOffset:-1}) 将覆盖面板的左偏移 |
|
|
23
|
+
| topOffset | number | 打印顶部偏移量 <br>template.print(data,{topOffset:-1}) 将覆盖面板的顶部偏移 <br>template.getHtml(data,{topOffset:-1}) 将覆盖面板的顶部偏移 |
|
|
24
|
+
|
|
25
|
+
# 文本
|
|
26
|
+
普通文本分为3种类型：`文本类型`、`条形码类型`、`二维码类型`。
|
|
27
|
+
```js
|
|
28
|
+
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
#### printElementType
|
|
32
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
33
|
+
| --- | --- | --- | --- |
|
|
34
|
+
| tid | string | 元素类型的标识 | |
|
|
35
|
+
| title | string | 用户托拽列表中显示的名称 | |
|
|
36
|
+
| field | string | 打印元素类型所对应的数据Josn的Key | |
|
|
37
|
+
| data | string | 打印设置时，显示的默认值 | |
|
|
38
|
+
| formatter | function | 文本元素格式化函数，需要五个参数： <br>title：标题。 <br>value：值。 <br>options：打印元素的选项值。 <br>templateData：模板数据。 <br>target：文本控件dom。 <br>formatter:function(title,value,options,templateData,target){ return value=='1'?'测试':value; } | |
|
|
39
|
+
| styler | function | 文本元素的样式函数，返回样式对象来自定义该 文本元素的样式，例如 {'background':'red'} 。该函数需要四个参数： <br>value：字段的值。 <br>options：打印元素的选项值。 <br>target：文本控件dom。 <br>templateData：模板数据。 <br>styler:function(value,options,target,templateData){ return {color:'red'} } | |
|
|
40
|
+
| onRendered | function | 元素渲染完成事件，该函数需要三个参数： <br>target：元素jq dom。 <br>options：打印元素的选项值。 <br>paperTarget：打印所在纸张的ja dom | |
|
|
41
|
+
| fields | 数组 | 元素的字段数据源\[{field:'' ,text:'' }\] <br>fields存在 元素字段则显示为下拉框显示 <br>fields 不存在 元素字段则为输入框显示 <br>优先级高于 模板全局设置数据源 | |
|
|
42
|
+
|
|
43
|
+
#### options
|
|
44
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
45
|
+
| --- | --- | --- | --- |
|
|
46
|
+
| title | string | 标题或内容，field 存在：title为标题，打印结果为 `title:data` , field 不存在：title为内容，打印结果为 `title` | |
|
|
47
|
+
| field | string | 字段名称 | |
|
|
48
|
+
| testData | string | 测试数据，打印设计时 作为data,预览或打印时被真实数据替换 | |
|
|
49
|
+
| fontFamily | string | 字体 | 宋体 |
|
|
50
|
+
| fontSize | number | 字体大小 | 9pt |
|
|
51
|
+
| fontWeight | string | 字体粗细 | |
|
|
52
|
+
| letterSpacing | number | 字间距 | |
|
|
53
|
+
| color | number | 字体颜色 | |
|
|
54
|
+
| textDecoration | string | 文本描述 | |
|
|
55
|
+
| textAlign | string | 对齐 left center right | |
|
|
56
|
+
| lineHeight | number | 行高 | 9.75pt |
|
|
57
|
+
| textType | string | 文本类型 text barcode(条形码) qrcode(二维码) | text |
|
|
58
|
+
| barcodeMode | string | 条形码格式 | |
|
|
59
|
+
| hideTitle | boolean | 隐藏标题 | false |
|
|
60
|
+
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效` <br>first:首页显示 <br>odd:奇数页显示 <br>even:偶数页显示 <br>last:尾页显示 | |
|
|
61
|
+
| fixed | bool | 位置固定 每页打印到指定位置 <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。 <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 | |
|
|
62
|
+
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) | |
|
|
63
|
+
| transform | number | 旋转角度 | |
|
|
64
|
+
|
|
65
|
+
# 图片
|
|
66
|
+
#### printElementType
|
|
67
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
68
|
+
| --- | --- | --- | --- |
|
|
69
|
+
| tid | string | 元素类型的标识 | |
|
|
70
|
+
| field | string | 打印元素类型所对应的数据Josn的Key | |
|
|
71
|
+
| data | string | 打印设置时，显示的默认值 | |
|
|
72
|
+
| formatter | function | 文本元素格式化函数，需要三个参数： <br>value：值。 <br>options：打印元素的选项值。 <br>templateData：模板数据。 | |
|
|
73
|
+
| styler | function | 文本元素的样式函数，返回样式对象来自定义该 文本元素的样式，例如 {'background':'red'} 。该函数需要四个参数： <br>value：字段的值。 <br>options：打印元素的选项值。 <br>target：控件dom。 <br>templateData：模板数据。 | |
|
|
74
|
+
| onRendered | function | 元素渲染完成事件，该函数需要三个参数： <br>target：元素jq dom。 <br>options：打印元素的选项值。 <br>paperTarget：打印所在纸张的jq dom | |
|
|
75
|
+
| fields | 数组 | 元素的字段数据源\[{field:'' ,text:'' }\] <br>fields存在 元素字段则显示为下拉框显示 <br>fields 不存在 元素字段则为输入框显示 <br>优先级高于 模板全局设置数据源 | |
|
|
76
|
+
|
|
77
|
+
#### options
|
|
78
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
79
|
+
| --- | --- | --- | --- |
|
|
80
|
+
| title | string | 标题或内容，field 存在：title为标题，打印结果为 `title:data` , field 不存在：title为内容，打印结果为 `title` | |
|
|
81
|
+
| field | string | 字段名称 | |
|
|
82
|
+
| src | string | field不存在的情况下，显示src的内容 | |
|
|
83
|
+
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效` <br>first:首页显示 <br>odd:奇数页显示 <br>even:偶数页显示 <br>last:尾页显示 | |
|
|
84
|
+
| fixed | bool | 位置固定 每页打印到指定位置 <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。 <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 | |
|
|
85
|
+
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) | |
|
|
86
|
+
| transform | number | 旋转角度 | |
|
|
87
|
+
|
|
88
|
+
# 横线
|
|
89
|
+
```js
|
|
90
|
+
panel.addPrintHline({ options: { width: 135, top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
|
|
91
|
+
```
|
|
92
|
+
#### printElementType
|
|
93
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
94
|
+
| --- | --- | --- | --- |
|
|
95
|
+
| tid | string | 元素类型的标识 | |
|
|
96
|
+
| onRendered | function | 元素渲染完成事件，该函数需要三个参数： <br>target：元素jq dom。 <br>options：打印元素的选项值。 <br>paperTarget：打印所在纸张的jq dom | |
|
|
97
|
+
|
|
98
|
+
#### options
|
|
99
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
100
|
+
| --- | --- | --- | --- |
|
|
101
|
+
| borderColor（可空） | string | 边框颜色 | |
|
|
102
|
+
| borderWidth（可空） | string | 边框大小 | |
|
|
103
|
+
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效` <br>first:首页显示 <br>odd:奇数页显示 <br>even:偶数页显示 <br>last:尾页显示 | |
|
|
104
|
+
| fixed | bool | 位置固定 每页打印到指定位置 <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。 <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 | |
|
|
105
|
+
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) | |
|
|
106
|
+
| transform | number | 旋转角度 | |
|
|
107
|
+
|
|
108
|
+
# 竖线
|
|
109
|
+
```js
|
|
110
|
+
panel.addPrintVline({ options: { height: 35, top: 230, left: 20,borderColor:'',borderWidth:0.75 } });
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
#### printElementType
|
|
114
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
115
|
+
| --- | --- | --- | --- |
|
|
116
|
+
| tid | string | 元素类型的标识 | |
|
|
117
|
+
| onRendered | function | 元素渲染完成事件，该函数需要三个参数： <br>target：元素jq dom。 <br>options：打印元素的选项值。 <br>paperTarget：打印所在纸张的ja dom | |
|
|
118
|
+
|
|
119
|
+
#### options
|
|
120
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
121
|
+
| --- | --- | --- | --- |
|
|
122
|
+
| borderColor（可空） | string | 边框颜色 | |
|
|
123
|
+
| borderWidth（可空） | string | 边框大小 | |
|
|
124
|
+
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效` <br>first:首页显示 <br>odd:奇数页显示 <br>even:偶数页显示 <br>last:尾页显示 | |
|
|
125
|
+
| fixed | bool | 位置固定 每页打印到指定位置 | |
|
|
126
|
+
| transform | number | 旋转角度 | |
|
|
127
|
+
|
|
128
|
+
# 矩形
|
|
129
|
+
```js
|
|
130
|
+
panel.addPrintRect({ options: { width: 135, height:135,top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
#### printElementType
|
|
134
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
135
|
+
| --- | --- | --- | --- |
|
|
136
|
+
| tid | string | 元素类型的标识 | |
|
|
137
|
+
| onRendered | function | 元素渲染完成事件，该函数需要三个参数： <br>target：元素jq dom。 <br>options：打印元素的选项值。 <br>paperTarget：打印所在纸张的ja dom | |
|
|
138
|
+
|
|
139
|
+
#### options
|
|
140
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
141
|
+
| --- | --- | --- | --- |
|
|
142
|
+
| borderColor（可空） | string | 边框颜色 | |
|
|
143
|
+
| borderWidth（可空） | string | 边框大小 | |
|
|
144
|
+
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效` <br>first:首页显示 <br>odd:奇数页显示 <br>even:偶数页显示 <br>last:尾页显示 | |
|
|
145
|
+
| fixed | bool | 位置固定 每页打印到指定位置 <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。 <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 | |
|
|
146
|
+
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) | |
|
|
147
|
+
| transform | number | 旋转角度 | |
|
|
148
|
+
|
|
149
|
+
# 椭圆
|
|
150
|
+
```js
|
|
151
|
+
panel.addPrintOval({ options: { width: 135, height:135,top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
#### printElementType
|
|
155
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
156
|
+
| --- | --- | --- | --- |
|
|
157
|
+
| tid | string | 元素类型的标识 | |
|
|
158
|
+
| onRendered | function | 元素渲染完成事件，该函数需要三个参数： <br>target：元素jq dom。 <br>options：打印元素的选项值。 <br>paperTarget：打印所在纸张的ja dom | |
|
|
159
|
+
|
|
160
|
+
#### options
|
|
161
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
162
|
+
| --- | --- | --- | --- |
|
|
163
|
+
| borderColor（可空） | string | 边框颜色 | |
|
|
164
|
+
| borderWidth（可空） | string | 边框大小 | |
|
|
165
|
+
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效` <br>first:首页显示 <br>odd:奇数页显示 <br>even:偶数页显示 <br>last:尾页显示 | |
|
|
166
|
+
| fixed | bool | 位置固定 每页打印到指定位置 <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。 <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 | |
|
|
167
|
+
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) | |
|
|
168
|
+
| transform | number | 旋转角度 | |
|
|
169
|
+
|
|
170
|
+
# 表格
|
|
171
|
+
|
|
172
|
+
#### printElementType
|
|
173
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
174
|
+
| --- | --- | --- | --- |
|
|
175
|
+
| tid | string | 元素类型的标识 | |
|
|
176
|
+
| title | string | 用户托拽列表中显示的名称 | |
|
|
177
|
+
| field | string | 字段名称 | |
|
|
178
|
+
| styler | function | 表格样式函数，返回样式对象来自定义该 表格元素的样式，例如 {'background':'red'} 。该函数需要二个参数： <br>value：字段的值。 <br>options：打印元素的选项值。 | |
|
|
179
|
+
| rowStyler | function | 表格列样式函数，返回样式对象来自定义该 tr元素的样式，例如 {'background':'red'} 。该函数需要二个参数： <br>value：字段的值。 <br>options：打印元素的选项值。 | |
|
|
180
|
+
| `columns` | array<array\> | 表格的列（column）的配置对象，更多细节请参见列（column）属性。\[\[{},{}\]\[{},{}\]\] //多行表头 | |
|
|
181
|
+
| formatter | function | 该函数需要一个参数：data | 返回表格的html 字符串 |
|
|
182
|
+
| groupFields | array | 表格的数据的分组字段，该字段为数组，可以根据多列进行分组。 | |
|
|
183
|
+
| groupFormatter | function | 分组头格式化函数，定义分组显示信息，当groupFields数组长度为1是默认显示为字段值。该函数需要二个参数： <br>groupData：分组信息。 <br>options：打印元素的选项值。 | |
|
|
184
|
+
| footerFormatter | function | 表格脚格式化函数，定义分组尾部显示信息，可以放置写统计信息。。该函数需要四个参数： <br>options：打印元素的选项值。 <br>rows <br>data <br>currentPageGridRowsData：当前页数据 | |
|
|
185
|
+
| gridColumnsFooterFormatter | function | 多组表格脚格式化函数，定义分组尾部显示信息，可以放置写统计信息。。该函数需要四个参数： <br>options：打印元素的选项值。 <br>rows <br>data <br>currentPageRowsData：当前页数据 | |
|
|
186
|
+
| groupFooterFormatter | function | 分组脚格式化函数，定义分组尾部显示信息，可以放置写统计信息。。该函数需要二个参数： <br>groupData：分组信息。 <br>options：打印元素的选项值。 | |
|
|
187
|
+
| onRendered | function | 元素渲染完成事件，该函数需要三个参数： <br>target：元素jq dom。 <br>options：打印元素的选项值。 <br>paperTarget：打印所在纸张的ja dom | |
|
|
188
|
+
| fields | 数组 | 元素的字段数据源\[{field:'' ,text:'' }\] <br>fields存在 元素字段则显示为下拉框显示 <br>fields 不存在 元素字段则为输入框显示 <br>优先级高于 模板全局设置数据源 | |
|
|
189
|
+
|
|
190
|
+
###### `columns`列属性
|
|
191
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
192
|
+
| --- | --- | --- | --- |
|
|
193
|
+
| width | number | 此宽度只是相对值 实际渲染会等比换算 | 100 |
|
|
194
|
+
| title | string | 列标题 | |
|
|
195
|
+
| field | string | 列所对应的数据字段 | |
|
|
196
|
+
| fixed | boolean | 宽度锁定，渲染时不进行等比换算 | false |
|
|
197
|
+
| rowspan | number | 指示一个单元格占据多少行。 | |
|
|
198
|
+
| colspan | number | 指示一个单元格占据多少列。 | |
|
|
199
|
+
| align | string | 指示如何对齐该列的数据，可以用 'left'、'right'、'center'。 | |
|
|
200
|
+
| halign | string | 指示如何对齐该列的头部，可能的值：'left'、'right'、'center'。如果没有分配值，则头部对齐方式将与通过 'align' 属性定义的数据对齐方式一致 | |
|
|
201
|
+
| formatter | function | 单元格的格式化函数，需要四个参数： <br>value：字段的值。 <br>row：行的记录数据。 <br>index：行的索引。 <br>options：打印元素的选项值 | |
|
|
202
|
+
| styler | function | 单元格的样式函数，需要四个参数： <br>value：字段的值。 <br>row：行的记录数据。 <br>index：行的索引。 <br>options：打印元素的选项值 | |
|
|
203
|
+
|
|
204
|
+
#### options
|
|
205
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
206
|
+
| --- | --- | --- | --- |
|
|
207
|
+
| field | string | 字段名称 | |
|
|
208
|
+
| fontFamily | string | 字体 | 宋体 |
|
|
209
|
+
| fontSize | number | 字体大小 | 9pt |
|
|
210
|
+
| lineHeight | number | 行高 | 9.75pt |
|
|
211
|
+
| textAlign | string | 对齐 left center right | |
|
|
212
|
+
| tableBorder | string | 表格边框noBorder或border | |
|
|
213
|
+
| tableHeaderBorder | string | 表头边框noBorder或border或topBorder或bottomBorder或topBottomBorder | |
|
|
214
|
+
| tableHeaderCellBorder | string | 表头单元格边框noBorder或border | |
|
|
215
|
+
| tableHeaderRowHeight | number | 表头高度pt | |
|
|
216
|
+
| tableHeaderBackground | string | 表头颜色 | |
|
|
217
|
+
| tableHeaderFontSize | number | 表头字体大小 | |
|
|
218
|
+
| tableHeaderFontWeight | string | 表头字体粗细 | |
|
|
219
|
+
| tableBodyCellBorder | string | 表体单元格边框noBorder或borde | |
|
|
220
|
+
| tableBodyRowBorder | string | 表头边框noBorder或border或topBorder或bottomBorder或topBottomBorder | |
|
|
221
|
+
| tableBodyRowHeight | number | 标题行高度 | |
|
|
222
|
+
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) | |
|
|
223
|
+
| lHeight | number | 当长文本或表格数据过少或为空，元素高度将是他们占用的实际高度，下方元素保持原有间距。可以设置元素lHeight属性（number）来设置元素显示的最小高度。 | |
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
# 长文本
|
|
227
|
+
长文本和文本的区别,长文本随着文本数据的长度变大，打印高度不断变高，高度过高则自动分页，长文本下方元素同步下移和长文本保持设定好的边距，文本类型：定高定宽，打印区域不变。不会对其他打印元素造成影响。
|
|
228
|
+
```js
|
|
229
|
+
panel.addPrintLongText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
#### printElementType
|
|
233
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
234
|
+
| --- | --- | --- | --- |
|
|
235
|
+
| tid | string | 元素类型的标识 | |
|
|
236
|
+
| title | string | 用户托拽列表中显示的名称 | |
|
|
237
|
+
| field | string | 打印元素类型所对应的数据Josn的Key | |
|
|
238
|
+
| data | string | 打印设置时，显示的默认值 | |
|
|
239
|
+
| formatter | function | 文本元素格式化函数，需要四个参数： <br>title：标题。 <br>value：值。 <br>options：打印元素的选项值。 <br>templateData：模板数据。 | |
|
|
240
|
+
| styler | function | 文本元素的样式函数，返回样式对象来自定义该 文本元素的样式，例如 {'background':'red'} 。该函数需要四个参数： <br>value：字段的值。 <br>options：打印元素的选项值。 <br>target：长文本控件dom。 <br>templateData：模板数据。 | |
|
|
241
|
+
| onRendered | function | 元素渲染完成事件，该函数需要三个参数： <br>target：元素jq dom。 <br>options：打印元素的选项值。 <br>paperTarget：打印所在纸张的ja dom | |
|
|
242
|
+
| fields | 数组 | 元素的字段数据源\[{field:'' ,text:'' }\] <br>fields存在 元素字段则显示为下拉框显示 <br>fields 不存在 元素字段则为输入框显示 <br>优先级高于 模板全局设置数据源 | |
|
|
243
|
+
|
|
244
|
+
#### options
|
|
245
|
+
| 名称 | 类型 | 描述 | 默认值 |
|
|
246
|
+
| --- | --- | --- | --- |
|
|
247
|
+
| title | string | 标题或内容，field 存在：title为标题，打印结果为 `title:data` , field 不存在：title为内容，打印结果为 `title` | |
|
|
248
|
+
| field | string | 字段名称 | |
|
|
249
|
+
| testData | string | 测试数据，打印设计时 作为data,预览或打印时被真实数据替换 | |
|
|
250
|
+
| fontFamily | string | 字体 | 宋体 |
|
|
251
|
+
| fontSize | number | 字体大小 | 9pt |
|
|
252
|
+
| fontWeight | string | 字体粗细 | |
|
|
253
|
+
| letterSpacing | number | 字间距 | |
|
|
254
|
+
| color | number | 字体颜色 | |
|
|
255
|
+
| textDecoration | string | 文本描述 | |
|
|
256
|
+
| textAlign | string | 对齐 left center right | |
|
|
257
|
+
| lineHeight | number | 行高 | 9.75pt |
|
|
258
|
+
| hideTitle | boolean | 隐藏标题 | false |
|
|
259
|
+
| longTextIndent | number | 每行缩进 | |
|
|
260
|
+
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效` <br>first:首页显示 <br>odd:奇数页显示 <br>even:偶数页显示 <br>last:尾页显示 | |
|
|
261
|
+
| fixed | bool | 位置固定 每页打印到指定位置 <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。 <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 | |
|
|
262
|
+
| leftSpaceRemoved | boolean | 移除段落左侧空白符 | true |
|
|
263
|
+
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) | |
|
|
264
|
+
| lHeight | number | 当长文本或表格数据过少或为空，元素高度将是他们占用的实际高度，下方元素保持原有间距。可以设置元素lHeight属性（number）来设置元素显示的最小高度。 | |
|
|
265
|
+
| transform | number | 旋转角度 | |
|
|
@@ -5,12 +5,52 @@ import '../libs/plugins/jquery.hiwprint.js';
|
|
|
5
5
|
import '../libs/hiprint.config.js';
|
|
6
6
|
// 样式
|
|
7
7
|
import '../libs/css/hiprint.css';
|
|
8
|
-
import {ref, computed, watch, reactive, nextTick} from 'vue';
|
|
8
|
+
import {ref, computed, watch, reactive, nextTick, Ref, ComputedRef} from 'vue';
|
|
9
|
+
|
|
10
|
+
// 定义类型
|
|
11
|
+
interface PaperType {
|
|
12
|
+
label: string;
|
|
13
|
+
value: string;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
interface PaperDimensions {
|
|
17
|
+
width: number;
|
|
18
|
+
height: number;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
interface DataSourceItem {
|
|
22
|
+
columns?: string;
|
|
23
|
+
code: string;
|
|
24
|
+
name: string;
|
|
25
|
+
type: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
interface DataSourceOption {
|
|
29
|
+
label: string;
|
|
30
|
+
value: string;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
interface AxiosInstance {
|
|
34
|
+
request: (config: any) => Promise<any>;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
interface ResponseData {
|
|
38
|
+
list: DataSourceItem[];
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
interface Response {
|
|
42
|
+
data: {
|
|
43
|
+
data?: {
|
|
44
|
+
sourceCodes?: string;
|
|
45
|
+
};
|
|
46
|
+
list: DataSourceItem[];
|
|
47
|
+
};
|
|
48
|
+
}
|
|
9
49
|
|
|
10
50
|
export const hiprint = h;
|
|
11
51
|
export const defaultElementTypeProvider = p;
|
|
12
52
|
|
|
13
|
-
export function print(provider = defaultElementTypeProvider, template, ...args) {
|
|
53
|
+
export function print(provider: any = defaultElementTypeProvider, template: any, ...args: any[]): any {
|
|
14
54
|
hiprint.init({
|
|
15
55
|
providers: [new provider()],
|
|
16
56
|
});
|
|
@@ -21,7 +61,7 @@ export function print(provider = defaultElementTypeProvider, template, ...args)
|
|
|
21
61
|
return hiprintTemplate;
|
|
22
62
|
}
|
|
23
63
|
|
|
24
|
-
export function print2(provider = defaultElementTypeProvider, template, ...args) {
|
|
64
|
+
export function print2(provider: any = defaultElementTypeProvider, template: any, ...args: any[]): any {
|
|
25
65
|
hiprint.init({
|
|
26
66
|
providers: [new provider()],
|
|
27
67
|
});
|
|
@@ -33,8 +73,8 @@ export function print2(provider = defaultElementTypeProvider, template, ...args)
|
|
|
33
73
|
}
|
|
34
74
|
|
|
35
75
|
export function usePaper() {
|
|
36
|
-
const paperType = ref('A4');
|
|
37
|
-
const paperTypeName = computed(() => {
|
|
76
|
+
const paperType = ref<string>('A4');
|
|
77
|
+
const paperTypeName = computed((): string => {
|
|
38
78
|
const paperTypeObj = paperTypesObj.find((item) => item.value === paperType.value);
|
|
39
79
|
if (paperTypeObj) {
|
|
40
80
|
return paperTypeObj.label;
|
|
@@ -42,10 +82,10 @@ export function usePaper() {
|
|
|
42
82
|
return '自定义';
|
|
43
83
|
}
|
|
44
84
|
});
|
|
45
|
-
const paperWidth = ref(210);
|
|
46
|
-
const paperHeight = ref(296.6);
|
|
85
|
+
const paperWidth = ref<number>(210);
|
|
86
|
+
const paperHeight = ref<number>(296.6);
|
|
47
87
|
|
|
48
|
-
const paperTypesObj = reactive([
|
|
88
|
+
const paperTypesObj = reactive<PaperType[]>([
|
|
49
89
|
{label: 'A3', value: 'A3'},
|
|
50
90
|
{label: 'A4', value: 'A4'},
|
|
51
91
|
{label: 'A5', value: 'A5'},
|
|
@@ -54,7 +94,7 @@ export function usePaper() {
|
|
|
54
94
|
{label: 'B5', value: 'B5'},
|
|
55
95
|
]);
|
|
56
96
|
|
|
57
|
-
const paperTypes = {
|
|
97
|
+
const paperTypes: Record<string, PaperDimensions> = {
|
|
58
98
|
A3: {
|
|
59
99
|
width: 420,
|
|
60
100
|
height: 297,
|
|
@@ -81,9 +121,9 @@ export function usePaper() {
|
|
|
81
121
|
},
|
|
82
122
|
};
|
|
83
123
|
|
|
84
|
-
function setPaper(type, callback) {
|
|
124
|
+
function setPaper(type: string, callback: () => void): void {
|
|
85
125
|
if (type !== 'other') {
|
|
86
|
-
|
|
126
|
+
const {width, height} = paperTypes[type];
|
|
87
127
|
paperWidth.value = width;
|
|
88
128
|
paperHeight.value = height;
|
|
89
129
|
}
|
|
@@ -120,22 +160,22 @@ export function usePaper() {
|
|
|
120
160
|
};
|
|
121
161
|
}
|
|
122
162
|
|
|
123
|
-
export function useScale(callback) {
|
|
124
|
-
const scaleValue = ref(1);
|
|
125
|
-
const scalePercentage = computed(() => {
|
|
163
|
+
export function useScale(callback: () => void) {
|
|
164
|
+
const scaleValue = ref<number>(1);
|
|
165
|
+
const scalePercentage = computed((): string => {
|
|
126
166
|
return `${(scaleValue.value * 100).toFixed(0)}%`;
|
|
127
167
|
});
|
|
128
|
-
const canZoomIn = computed(() => {
|
|
168
|
+
const canZoomIn = computed((): boolean => {
|
|
129
169
|
return scaleValue.value > 0.5;
|
|
130
170
|
});
|
|
131
|
-
const canZoomOut = computed(() => {
|
|
171
|
+
const canZoomOut = computed((): boolean => {
|
|
132
172
|
return scaleValue.value < 4;
|
|
133
173
|
});
|
|
134
|
-
function zoomIn() {
|
|
174
|
+
function zoomIn(): void {
|
|
135
175
|
scaleValue.value = scaleValue.value - 0.1;
|
|
136
176
|
callback();
|
|
137
177
|
}
|
|
138
|
-
function zoomOut() {
|
|
178
|
+
function zoomOut(): void {
|
|
139
179
|
scaleValue.value = scaleValue.value + 0.1;
|
|
140
180
|
callback();
|
|
141
181
|
}
|
|
@@ -149,55 +189,60 @@ export function useScale(callback) {
|
|
|
149
189
|
};
|
|
150
190
|
}
|
|
151
191
|
|
|
152
|
-
export function useDataSource(axios) {
|
|
153
|
-
const detailData = ref();
|
|
154
|
-
function getDetail(id) {
|
|
192
|
+
export function useDataSource(axios: AxiosInstance) {
|
|
193
|
+
const detailData = ref<any>();
|
|
194
|
+
function getDetail(id: string | number): Promise<any> {
|
|
155
195
|
return axios
|
|
156
196
|
.request({
|
|
157
197
|
url: `/printTemplate/get/${id}`,
|
|
158
198
|
method: 'post',
|
|
159
199
|
})
|
|
160
|
-
.then((res) => {
|
|
200
|
+
.then((res: Response) => {
|
|
161
201
|
if (res.data.data && res.data.data.sourceCodes) {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
formCode.value =
|
|
202
|
+
const codes = res.data.data.sourceCodes.split(',');
|
|
203
|
+
const formListCode = dataSourceForm.value.map((item) => item.value);
|
|
204
|
+
const filteredCodes = codes.filter((item) => formListCode.includes(item));
|
|
205
|
+
formCode.value = filteredCodes;
|
|
166
206
|
} else {
|
|
167
|
-
formCode.value =
|
|
207
|
+
formCode.value = [];
|
|
168
208
|
}
|
|
169
209
|
detailData.value = res.data.data;
|
|
170
210
|
return Promise.resolve(res.data.data);
|
|
171
211
|
});
|
|
172
212
|
}
|
|
173
|
-
const listCode = ref([]);
|
|
174
|
-
const dataSourceList = ref([]);
|
|
175
|
-
const listColumns = computed(() => {
|
|
176
|
-
|
|
177
|
-
|
|
213
|
+
const listCode = ref<string[]>([]);
|
|
214
|
+
const dataSourceList = ref<DataSourceOption[]>([]);
|
|
215
|
+
const listColumns = computed((): string[] => {
|
|
216
|
+
if (!codeMapDataSource.value[listCode.value[0]] || !Array.isArray(codeMapDataSource.value[listCode.value[0]])) {
|
|
217
|
+
return [];
|
|
218
|
+
}
|
|
219
|
+
return codeMapDataSource.value[listCode.value[0]].map((item) => {
|
|
220
|
+
const index = item.indexOf('[');
|
|
178
221
|
return item.substring(index + 1, item.length - 1);
|
|
179
222
|
});
|
|
180
223
|
});
|
|
181
224
|
|
|
182
|
-
const formCode = ref([]);
|
|
183
|
-
const formColumns = computed(() => {
|
|
184
|
-
|
|
225
|
+
const formCode = ref<string[]>([]);
|
|
226
|
+
const formColumns = computed((): string[] => {
|
|
227
|
+
const arr: string[] = [];
|
|
185
228
|
if (formCode.value && formCode.value.length) {
|
|
186
229
|
formCode.value.forEach((item) => {
|
|
187
|
-
|
|
230
|
+
if (codeMapDataSource.value[item] && Array.isArray(codeMapDataSource.value[item])) {
|
|
231
|
+
arr.push(...codeMapDataSource.value[item]);
|
|
232
|
+
}
|
|
188
233
|
});
|
|
189
234
|
}
|
|
190
235
|
return arr;
|
|
191
236
|
});
|
|
192
|
-
const dataSourceForm = ref([]);
|
|
193
|
-
const codeMapDataSource = ref({});
|
|
194
|
-
function getDataSourceList() {
|
|
237
|
+
const dataSourceForm = ref<DataSourceOption[]>([]);
|
|
238
|
+
const codeMapDataSource = ref<Record<string, string[]>>({});
|
|
239
|
+
function getDataSourceList(): Promise<void> {
|
|
195
240
|
return axios
|
|
196
241
|
.request({
|
|
197
242
|
url: '/printTemplate/getDsList',
|
|
198
243
|
method: 'post',
|
|
199
244
|
})
|
|
200
|
-
.then((res) => {
|
|
245
|
+
.then((res: Response) => {
|
|
201
246
|
res.data.list.forEach((item) => {
|
|
202
247
|
if (item.columns) {
|
|
203
248
|
codeMapDataSource.value[item.code] = item?.columns?.split(',')?.map((col) => `$${item.code}[${col.toUpperCase()}]`) || [];
|
|
@@ -217,7 +262,7 @@ export function useDataSource(axios) {
|
|
|
217
262
|
});
|
|
218
263
|
}
|
|
219
264
|
|
|
220
|
-
const dataSource = ref([]);
|
|
265
|
+
const dataSource = ref<any[]>([]);
|
|
221
266
|
return {
|
|
222
267
|
detailData,
|
|
223
268
|
getDetail,
|
|
@@ -233,4 +278,10 @@ export function useDataSource(axios) {
|
|
|
233
278
|
};
|
|
234
279
|
}
|
|
235
280
|
|
|
281
|
+
declare global {
|
|
282
|
+
interface Window {
|
|
283
|
+
hiprint: any;
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
236
287
|
window.hiprint = hiprint;
|
package/{index.js → index.ts}
RENAMED
|
@@ -1,14 +1,54 @@
|
|
|
1
1
|
// @ts-check
|
|
2
2
|
import './libs/jquery';
|
|
3
|
-
|
|
3
|
+
import { hiprint, defaultElementTypeProvider, print, print2, usePaper, useScale, useDataSource } from './hooks/useHiprint';
|
|
4
4
|
export { default as fontSize } from './font-size';
|
|
5
5
|
export { default as scale } from './scale';
|
|
6
6
|
export { default as zIndex } from './z-index';
|
|
7
7
|
export { default as panel } from './panel';
|
|
8
8
|
import { getPrintTemplate } from 'yh-hiprint/libs/index.js';
|
|
9
9
|
import { ElMessageBox, ElLoading } from 'element-plus';
|
|
10
|
+
export { hiprint, defaultElementTypeProvider, print, print2, usePaper, useScale, useDataSource };
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
// 定义类型
|
|
13
|
+
interface HiprintFunParams {
|
|
14
|
+
code: string;
|
|
15
|
+
params?: any;
|
|
16
|
+
data?: any;
|
|
17
|
+
isCustom?: boolean;
|
|
18
|
+
returnHtml?: boolean;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
interface SilentHiprintParams {
|
|
22
|
+
code: string;
|
|
23
|
+
params?: any;
|
|
24
|
+
data?: any;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
interface MessageEvent {
|
|
28
|
+
data: {
|
|
29
|
+
type: string;
|
|
30
|
+
data: any;
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
interface TemplateResponse {
|
|
35
|
+
status: number;
|
|
36
|
+
data?: {
|
|
37
|
+
json: string;
|
|
38
|
+
};
|
|
39
|
+
message?: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
interface HiprintTemplate {
|
|
43
|
+
new (options: { template: any }): any;
|
|
44
|
+
getHtml(data: any): Array<{ innerHTML: string }>;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
interface CustomWindow extends Window {
|
|
48
|
+
silentHiprint: typeof silentHiprint;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export function cLog (string: string, isError: boolean = false): void {
|
|
12
52
|
if (isError) {
|
|
13
53
|
console.error('%cyhHiprint：%c', 'font-size: 16px;font-weight: bold;color: #00ffff', 'font-size: 16px;font-weight: bold;color: #ccccc', string);
|
|
14
54
|
} else {
|
|
@@ -16,16 +56,16 @@ export function cLog (string, isError = false) {
|
|
|
16
56
|
}
|
|
17
57
|
}
|
|
18
58
|
|
|
19
|
-
const hiprintFun = async ({ code, params, data, isCustom, returnHtml }) => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
59
|
+
const hiprintFun = async ({ code, params, data, isCustom, returnHtml }: HiprintFunParams): Promise<any> => {
|
|
60
|
+
const height: number = document.documentElement.clientHeight;
|
|
61
|
+
const width: number = 1200;
|
|
62
|
+
const left: number = (document.documentElement.clientWidth - 1200) / 2;
|
|
23
63
|
// 转换数组
|
|
24
|
-
let paramData = params;
|
|
64
|
+
let paramData: any = params;
|
|
25
65
|
if (!Array.isArray(params)) {
|
|
26
66
|
paramData = [params];
|
|
27
67
|
}
|
|
28
|
-
let url = '/hiprint/#/preview?code=' + encodeURIComponent(code);
|
|
68
|
+
let url: string = '/hiprint/#/preview?code=' + encodeURIComponent(code);
|
|
29
69
|
if (params) {
|
|
30
70
|
url += `¶ms=${encodeURIComponent(JSON.stringify(paramData))}`;
|
|
31
71
|
}
|
|
@@ -38,14 +78,14 @@ const hiprintFun = async ({ code, params, data, isCustom, returnHtml }) => {
|
|
|
38
78
|
if (returnHtml) {
|
|
39
79
|
url += `&returnHtml=${returnHtml ? '1' : '0'}`;
|
|
40
80
|
}
|
|
41
|
-
|
|
81
|
+
const windowOpen = window.open(url, 'hiprintWindow', `height=${height}, width=${width}, top=20, left=${left}, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`);
|
|
42
82
|
|
|
43
83
|
return new Promise((resolve, reject) => {
|
|
44
84
|
if (!windowOpen) {
|
|
45
85
|
reject("预览窗口渲染失败！");
|
|
46
86
|
}
|
|
47
|
-
function printHTMLHandler (e) {
|
|
48
|
-
|
|
87
|
+
function printHTMLHandler (e: MessageEvent): void {
|
|
88
|
+
const { type, data } = e.data;
|
|
49
89
|
if (type === "sendPrintHTML" && data) {
|
|
50
90
|
resolve(data);
|
|
51
91
|
}
|
|
@@ -55,21 +95,21 @@ const hiprintFun = async ({ code, params, data, isCustom, returnHtml }) => {
|
|
|
55
95
|
});
|
|
56
96
|
};
|
|
57
97
|
|
|
58
|
-
const silentHiprint = async ({ code, params = {}, data }) => {
|
|
98
|
+
const silentHiprint = async ({ code, params = {}, data }: SilentHiprintParams): Promise<string | boolean> => {
|
|
59
99
|
if (!code || !data) {
|
|
60
100
|
ElMessageBox.alert("请正确的传递模板编号和打印数据", '提示');
|
|
61
101
|
return false;
|
|
62
102
|
}
|
|
63
|
-
let loading = null;
|
|
103
|
+
let loading: any = null;
|
|
64
104
|
try {
|
|
65
105
|
loading = ElLoading.service({
|
|
66
106
|
text: "正在获取打印模板"
|
|
67
107
|
});
|
|
68
|
-
|
|
108
|
+
const res: TemplateResponse = await getPrintTemplate(code, params);
|
|
69
109
|
if (res.status === 200 && res.data && res.data.json) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
110
|
+
const json: string = res.data.json;
|
|
111
|
+
const hiprintTemplate: HiprintTemplate = new (hiprint as any).PrintTemplate({ template: JSON.parse(json) });
|
|
112
|
+
const html: Array<{ innerHTML: string }> = hiprintTemplate.getHtml(data);
|
|
73
113
|
if (html[0]) {
|
|
74
114
|
return html[0].innerHTML;
|
|
75
115
|
} else {
|
|
@@ -90,13 +130,19 @@ const silentHiprint = async ({ code, params = {}, data }) => {
|
|
|
90
130
|
loading = null;
|
|
91
131
|
}
|
|
92
132
|
}
|
|
93
|
-
|
|
133
|
+
return false;
|
|
94
134
|
};
|
|
95
135
|
|
|
96
|
-
window.silentHiprint = silentHiprint;
|
|
136
|
+
(window as unknown as CustomWindow).silentHiprint = silentHiprint;
|
|
137
|
+
|
|
138
|
+
interface InstallOptions {
|
|
139
|
+
router?: any;
|
|
140
|
+
pinia?: any;
|
|
141
|
+
isAdmin?: boolean;
|
|
142
|
+
}
|
|
97
143
|
|
|
98
144
|
export default {
|
|
99
|
-
install (app, { router, pinia, isAdmin }) {
|
|
145
|
+
install (app: any, { router, pinia, isAdmin }: InstallOptions): void {
|
|
100
146
|
app.provide('$hiprint', hiprintFun);
|
|
101
147
|
app.provide('$silentHiprint', silentHiprint);
|
|
102
148
|
if (router) {
|
|
@@ -124,4 +170,4 @@ export default {
|
|
|
124
170
|
}
|
|
125
171
|
}
|
|
126
172
|
},
|
|
127
|
-
};
|
|
173
|
+
};
|