xh-htmlword 1.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/README.md +128 -0
- package/dist/counter.js +5392 -0
- package/dist/counter.umd.cjs +82 -0
- package/dist/vite.svg +1 -0
- package/index.d.ts +12 -0
- package/package.json +34 -0
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
## 安装
|
|
2
|
+
|
|
3
|
+
```
|
|
4
|
+
npm install xuhao-htmlword
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
## 导入
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
import handleExportWord from "xuhao-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
|
+
handleExportWord({
|
|
22
|
+
dom: ".export-box",
|
|
23
|
+
fileName: "cs",
|
|
24
|
+
timeOut: 3000,
|
|
25
|
+
callBack: () => {
|
|
26
|
+
console.log("导出成功");
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 示例 vue 模版
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
<div class="export-box" style="width: 565pt">
|
|
35
|
+
<p style="text-align: center">
|
|
36
|
+
<span
|
|
37
|
+
style="
|
|
38
|
+
font-family: 宋体;
|
|
39
|
+
font-weight: bold;
|
|
40
|
+
color: rgb(0, 0, 0);
|
|
41
|
+
min-height: 16pt;
|
|
42
|
+
font-size: 16pt;
|
|
43
|
+
"
|
|
44
|
+
>深水汴北配套管网运维日报表</span
|
|
45
|
+
>
|
|
46
|
+
</p>
|
|
47
|
+
<table
|
|
48
|
+
style="width: 565pt; border-collapse: collapse; border: 1px solid #dddddd"
|
|
49
|
+
>
|
|
50
|
+
<colgroup>
|
|
51
|
+
<col style="width: 89.65pt" />
|
|
52
|
+
<col style="width: 44.05pt" />
|
|
53
|
+
<col style="width: 121.5pt" />
|
|
54
|
+
<col style="width: 103.85pt" />
|
|
55
|
+
<col style="width: 73.3pt" />
|
|
56
|
+
<col style="width: 106.3pt" />
|
|
57
|
+
</colgroup>
|
|
58
|
+
|
|
59
|
+
<tr
|
|
60
|
+
v-for="(item, index) in data.head"
|
|
61
|
+
:key="index"
|
|
62
|
+
style="border: 1px solid #cccccc; height: 25.5pt"
|
|
63
|
+
>
|
|
64
|
+
<td
|
|
65
|
+
v-for="(item2, index) in item"
|
|
66
|
+
:key="index"
|
|
67
|
+
style="padding-left: 5.4pt; border: 1px solid #cccccc"
|
|
68
|
+
:style="{ width: item2.width }"
|
|
69
|
+
:colspan="index % 2 == 0 ? 2 : 1"
|
|
70
|
+
>
|
|
71
|
+
<span
|
|
72
|
+
style="
|
|
73
|
+
font-weight: bold;
|
|
74
|
+
color: #595959;
|
|
75
|
+
font-size: 9pt;
|
|
76
|
+
margin-right: 3pt;
|
|
77
|
+
"
|
|
78
|
+
>
|
|
79
|
+
{{ item2.title }}</span
|
|
80
|
+
>
|
|
81
|
+
<span style="color: #595959; font-size: 9pt">
|
|
82
|
+
{{ item2.label }}
|
|
83
|
+
</span>
|
|
84
|
+
</td>
|
|
85
|
+
</tr>
|
|
86
|
+
|
|
87
|
+
<tr style="border: 1px solid #cccccc; height: 25.5pt">
|
|
88
|
+
<td colspan="6" style="padding-left: 5.4pt; border: 1px solid #cccccc">
|
|
89
|
+
<span
|
|
90
|
+
style="
|
|
91
|
+
font-weight: bold;
|
|
92
|
+
color: #595959;
|
|
93
|
+
font-size: 9pt;
|
|
94
|
+
margin-right: 3pt;
|
|
95
|
+
"
|
|
96
|
+
>
|
|
97
|
+
标准化执行情况：</span
|
|
98
|
+
>
|
|
99
|
+
<span
|
|
100
|
+
v-for="(item, index) in executionList"
|
|
101
|
+
:key="index"
|
|
102
|
+
style="color: #595959; font-size: 9pt"
|
|
103
|
+
>
|
|
104
|
+
<span v-if="index !== 0"> </span>
|
|
105
|
+
<span>{{ data.execution == index ? "√" : "□" }}</span>
|
|
106
|
+
<span>
|
|
107
|
+
{{ item }}
|
|
108
|
+
</span>
|
|
109
|
+
</span>
|
|
110
|
+
</td>
|
|
111
|
+
</tr>
|
|
112
|
+
</table>
|
|
113
|
+
</div>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## 使用须知
|
|
117
|
+
|
|
118
|
+
由于 html-docx-js 已经无人维护版本较老（直接使用坑非常多），现修改使用成 xuhao-htmlword 用于生成 word 文档，已解决老语法兼容问题, 添加部分 ts 声明
|
|
119
|
+
以及图片跨域文本处理等缺陷升级,交流联系：1031945252@qq.com
|
|
120
|
+
|
|
121
|
+
## 注意事项
|
|
122
|
+
|
|
123
|
+
html 模版需要全局使用行内样式，否则生成的 word 文档样式不生效，img 标签可以使用 width/height 属性设置宽高
|
|
124
|
+
绝大部分 css3 样式无法生效，建议直接使用原生 table 标签编写
|
|
125
|
+
|
|
126
|
+
## 开源协议
|
|
127
|
+
|
|
128
|
+
ISC
|