xh-htmlword 1.1.4 → 1.1.7
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 +299 -131
- package/dist/xh.js +10328 -0
- package/dist/xh.umd.cjs +107 -0
- package/index.d.ts +25 -9
- package/package.json +12 -7
- package/dist/counter.js +0 -5411
- package/dist/counter.umd.cjs +0 -82
package/README.md
CHANGED
|
@@ -1,131 +1,299 @@
|
|
|
1
|
-
## 安装
|
|
2
|
-
|
|
3
|
-
```
|
|
4
|
-
npm install xh-htmlword
|
|
5
|
-
```
|
|
6
|
-
|
|
7
|
-
## 导入
|
|
8
|
-
|
|
9
|
-
```js
|
|
10
|
-
import handleExportWord from "xh-htmlword";
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## 页面 dom 生成后调用
|
|
14
|
-
|
|
15
|
-
```js
|
|
16
|
-
// dom：需要渲染的html父盒子标签 ， 类型：string 例如 id/class
|
|
17
|
-
// fileName：文件名称 类型：string
|
|
18
|
-
// timeOut:设置导出图片加载 超时时间 默认值 5000 (5s)
|
|
19
|
-
// callBack：导出成功回调函数
|
|
20
|
-
// options:配置项 类型：object 例如可传 {left:1440,right:1440} 控制页边距
|
|
21
|
-
// defultImg: 错误或者超时图片 默认图片地址 类型：string
|
|
22
|
-
// className:当前组件的class属性名标识 类型：string 配置此项后可以在标签写入class样式
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
style="
|
|
66
|
-
>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
1
|
+
## 安装
|
|
2
|
+
|
|
3
|
+
```
|
|
4
|
+
npm install xh-htmlword
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
## 导入
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
import handleExportWord from "xh-htmlword";
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 页面 dom 生成后调用
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
// dom：需要渲染的html父盒子标签 ， 类型：string 例如 id/class
|
|
17
|
+
// fileName：文件名称 类型：string
|
|
18
|
+
// timeOut:设置导出图片加载 超时时间 默认值 5000 (5s)
|
|
19
|
+
// callBack：导出成功回调函数
|
|
20
|
+
// options:配置项 类型：object 例如可传 {left:1440,right:1440} 控制页边距
|
|
21
|
+
// defultImg: 错误或者超时图片 默认图片地址 类型：string
|
|
22
|
+
// className:当前组件的class属性名标识 类型：string 配置此项后可以在标签写入class样式
|
|
23
|
+
// drawCanvas:当当前页面有比较复杂的样式或组件（element-ui等） 页面中可以用样式标签将它包裹起来然后将标签 传入drawCanvas数组中 开启转换
|
|
24
|
+
handleExportWord({
|
|
25
|
+
dom: ".export-box",
|
|
26
|
+
fileName: "cs",
|
|
27
|
+
timeOut: 3000,
|
|
28
|
+
callBack: () => {
|
|
29
|
+
console.log("导出成功");
|
|
30
|
+
},
|
|
31
|
+
defultImg: "",
|
|
32
|
+
className: "export-box",
|
|
33
|
+
drawCanvas: [".tree", "#btn"],
|
|
34
|
+
});
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## 示例 vue 模版
|
|
38
|
+
|
|
39
|
+
```js
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<div class="export-box" style="width: 565pt">
|
|
43
|
+
<div id="main1"></div>
|
|
44
|
+
<p style="text-align: center">
|
|
45
|
+
<span
|
|
46
|
+
style="
|
|
47
|
+
font-family: 宋体;
|
|
48
|
+
font-weight: bold;
|
|
49
|
+
color: rgb(0, 0, 0);
|
|
50
|
+
min-height: 16pt;
|
|
51
|
+
font-size: 16pt;
|
|
52
|
+
"
|
|
53
|
+
>深水汴北配套管网运维日报表</span
|
|
54
|
+
>
|
|
55
|
+
</p>
|
|
56
|
+
<table
|
|
57
|
+
style="width: 565pt; border-collapse: collapse; border: 1px solid #dddddd"
|
|
58
|
+
>
|
|
59
|
+
<colgroup>
|
|
60
|
+
<col style="width: 89.65pt" />
|
|
61
|
+
<col style="width: 44.05pt" />
|
|
62
|
+
<col style="width: 121.5pt" />
|
|
63
|
+
<col style="width: 103.85pt" />
|
|
64
|
+
<col style="width: 73.3pt" />
|
|
65
|
+
<col style="width: 106.3pt" />
|
|
66
|
+
</colgroup>
|
|
67
|
+
<!-- 头部 -->
|
|
68
|
+
<tr
|
|
69
|
+
v-for="(item, index) in data.head"
|
|
70
|
+
:key="index"
|
|
71
|
+
style="border: 1px solid #cccccc; height: 25.5pt"
|
|
72
|
+
>
|
|
73
|
+
<td
|
|
74
|
+
v-for="(item2, index) in item"
|
|
75
|
+
:key="index"
|
|
76
|
+
style="padding-left: 5.4pt; border: 1px solid #cccccc"
|
|
77
|
+
:style="{ width: item2.width }"
|
|
78
|
+
:colspan="index % 2 == 0 ? 2 : 1"
|
|
79
|
+
>
|
|
80
|
+
<span
|
|
81
|
+
style="
|
|
82
|
+
font-weight: bold;
|
|
83
|
+
color: #595959;
|
|
84
|
+
font-size: 9pt;
|
|
85
|
+
margin-right: 3pt;
|
|
86
|
+
"
|
|
87
|
+
>
|
|
88
|
+
{{ item2.title }}</span
|
|
89
|
+
>
|
|
90
|
+
<span style="color: #595959; font-size: 9pt">
|
|
91
|
+
{{ item2.label }}
|
|
92
|
+
</span>
|
|
93
|
+
</td>
|
|
94
|
+
</tr>
|
|
95
|
+
<!-- 到岗人员 -->
|
|
96
|
+
<tr style="border: 1px solid #cccccc; height: 25.5pt">
|
|
97
|
+
<td colspan="6" style="padding-left: 5.4pt; border: 1px solid #cccccc">
|
|
98
|
+
<span
|
|
99
|
+
style="
|
|
100
|
+
font-weight: bold;
|
|
101
|
+
color: #595959;
|
|
102
|
+
font-size: 9pt;
|
|
103
|
+
margin-right: 3pt;
|
|
104
|
+
"
|
|
105
|
+
>
|
|
106
|
+
到岗人员：</span
|
|
107
|
+
>
|
|
108
|
+
|
|
109
|
+
<span
|
|
110
|
+
v-for="(item, index) in data.personnel"
|
|
111
|
+
:key="index"
|
|
112
|
+
style="color: #595959; font-size: 9pt"
|
|
113
|
+
>
|
|
114
|
+
<span v-if="index !== 0"> </span>
|
|
115
|
+
<span>{{ item.title }}</span>
|
|
116
|
+
<span>
|
|
117
|
+
{{ item.label }}
|
|
118
|
+
</span>
|
|
119
|
+
</span>
|
|
120
|
+
</td>
|
|
121
|
+
</tr>
|
|
122
|
+
<!-- 标准化执行情况 -->
|
|
123
|
+
<tr style="border: 1px solid #cccccc; height: 25.5pt">
|
|
124
|
+
<td colspan="6" style="padding-left: 5.4pt; border: 1px solid #cccccc">
|
|
125
|
+
<span
|
|
126
|
+
style="
|
|
127
|
+
font-weight: bold;
|
|
128
|
+
color: #595959;
|
|
129
|
+
font-size: 9pt;
|
|
130
|
+
margin-right: 3pt;
|
|
131
|
+
"
|
|
132
|
+
>
|
|
133
|
+
标准化执行情况：</span
|
|
134
|
+
>
|
|
135
|
+
<span
|
|
136
|
+
v-for="(item, index) in executionList"
|
|
137
|
+
:key="index"
|
|
138
|
+
style="color: #595959; font-size: 9pt"
|
|
139
|
+
>
|
|
140
|
+
<span v-if="index !== 0"> </span>
|
|
141
|
+
<span>{{ data.execution == index ? "√" : "□" }}</span>
|
|
142
|
+
<span>
|
|
143
|
+
{{ item }}
|
|
144
|
+
</span>
|
|
145
|
+
</span>
|
|
146
|
+
</td>
|
|
147
|
+
</tr>
|
|
148
|
+
<!-- 巡检记录 -->
|
|
149
|
+
<tr style="border: 1px solid #cccccc; height: 36pt">
|
|
150
|
+
<td
|
|
151
|
+
colspan="6"
|
|
152
|
+
style="
|
|
153
|
+
text-align: center;
|
|
154
|
+
border: 1px solid #cccccc;
|
|
155
|
+
background-color: #f1f1f1;
|
|
156
|
+
color: rgb(89, 89, 89);
|
|
157
|
+
font-size: 14pt;
|
|
158
|
+
letter-spacing: 1pt;
|
|
159
|
+
"
|
|
160
|
+
>
|
|
161
|
+
巡检记录
|
|
162
|
+
</td>
|
|
163
|
+
</tr>
|
|
164
|
+
<tr>
|
|
165
|
+
<td
|
|
166
|
+
colspan="6"
|
|
167
|
+
style="
|
|
168
|
+
text-align: center;
|
|
169
|
+
border: 1px solid #cccccc;
|
|
170
|
+
background-color: #f1f1f1;
|
|
171
|
+
color: rgb(89, 89, 89);
|
|
172
|
+
font-size: 14pt;
|
|
173
|
+
letter-spacing: 1pt;
|
|
174
|
+
"
|
|
175
|
+
>
|
|
176
|
+
<img
|
|
177
|
+
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F04%2F0713%2F219519055_1_20210407012803425&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716081866&t=af941e4f60f743e1081f7cda8fcfb299"
|
|
178
|
+
width="565pt"
|
|
179
|
+
height="200pt"
|
|
180
|
+
/>
|
|
181
|
+
</td>
|
|
182
|
+
</tr>
|
|
183
|
+
</table>
|
|
184
|
+
|
|
185
|
+
<div class="btn">
|
|
186
|
+
<el-progress :percentage="50" />
|
|
187
|
+
<el-progress :percentage="100" :format="format" />
|
|
188
|
+
<el-progress :percentage="100" status="success" />
|
|
189
|
+
<el-progress :percentage="100" status="warning" />
|
|
190
|
+
<el-progress :percentage="50" status="exception" />
|
|
191
|
+
|
|
192
|
+
<el-steps style="max-width: 600px" :active="0" finish-status="success">
|
|
193
|
+
<el-step title="Step 1" />
|
|
194
|
+
<el-step title="Step 2" />
|
|
195
|
+
<el-step title="Step 3" />
|
|
196
|
+
</el-steps>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<button @click="handleExport">导出</button>
|
|
201
|
+
</template>
|
|
202
|
+
|
|
203
|
+
<script setup>
|
|
204
|
+
import { onMounted, nextTick } from "vue";
|
|
205
|
+
import handleExportWord from "xh-htmlword";
|
|
206
|
+
|
|
207
|
+
// 标准化执行情况
|
|
208
|
+
const executionList = ["优秀", "良好", "中等", "差"];
|
|
209
|
+
|
|
210
|
+
// 巡检记录
|
|
211
|
+
const data = {
|
|
212
|
+
head: [
|
|
213
|
+
[
|
|
214
|
+
{ title: "作业日期：", label: "2024年01月25日", width: "150pt" },
|
|
215
|
+
{ title: "填表人：", label: "吴宇、白阳", width: "110pt" },
|
|
216
|
+
{
|
|
217
|
+
title: "运维单位：",
|
|
218
|
+
label: "安徽中益达管道疏通有限公司",
|
|
219
|
+
width: "200pt",
|
|
220
|
+
},
|
|
221
|
+
{ title: "天气：", label: "多云（24°C）", width: "120pt" },
|
|
222
|
+
],
|
|
223
|
+
[
|
|
224
|
+
{
|
|
225
|
+
title: "现场负责人：",
|
|
226
|
+
label: "吴宇",
|
|
227
|
+
width: "150pt",
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
title: "手机号码：",
|
|
231
|
+
label: "13112345678",
|
|
232
|
+
width: "110pt",
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
title: "项目负责人：",
|
|
236
|
+
label: "吴宇",
|
|
237
|
+
width: "205pt",
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
title: "手机号码：",
|
|
241
|
+
label: "13198765432",
|
|
242
|
+
width: "120pt",
|
|
243
|
+
},
|
|
244
|
+
],
|
|
245
|
+
],
|
|
246
|
+
personnel: [
|
|
247
|
+
{
|
|
248
|
+
title: "安全员:",
|
|
249
|
+
label: "1人",
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
title: "监护人员:",
|
|
253
|
+
label: "1人",
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
title: "施工人员:",
|
|
257
|
+
label: "3人",
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
title: "巡查人员:",
|
|
261
|
+
label: "2人",
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
title: "潜水员:",
|
|
265
|
+
label: "1人",
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
title: "有限空间作业人员:",
|
|
269
|
+
label: "1人",
|
|
270
|
+
},
|
|
271
|
+
],
|
|
272
|
+
execution: 1,
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
const handleExport = () => {
|
|
276
|
+
handleExportWord({
|
|
277
|
+
dom: ".export-box",
|
|
278
|
+
fileName: "测试文件",
|
|
279
|
+
drawCanvas: [".btn"],
|
|
280
|
+
});
|
|
281
|
+
};
|
|
282
|
+
</script>
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
## 使用须知
|
|
288
|
+
|
|
289
|
+
由于 html-docx-js 已经无人维护版本较老（直接使用坑非常多），现修改使用成 xuhao-htmlword 用于生成 word 文档，已解决老语法兼容问题, 添加部分 ts 声明
|
|
290
|
+
以及图片跨域文本处理等缺陷升级,交流联系：1031945252@qq.com
|
|
291
|
+
|
|
292
|
+
## 注意事项
|
|
293
|
+
|
|
294
|
+
html 模版需要全局使用行内样式，否则生成的 word 文档样式不生效，img 标签可以使用 width/height 属性设置宽高,建议全局使用 pt 作为尺寸单位
|
|
295
|
+
绝大部分 css3 样式无法生效，建议直接使用原生 table 标签编写
|
|
296
|
+
|
|
297
|
+
## 开源协议
|
|
298
|
+
|
|
299
|
+
ISC
|