-
Notifications
You must be signed in to change notification settings - Fork 14
/
sample.html
191 lines (178 loc) · 5.2 KB
/
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML-DOCX test</title>
<!-- <script src="./vendor/es5-shim.min.js"></script> -->
<script src="./jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts.min.js"></script>
<!-- <script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script> -->
<!-- <script src="vendor/FileSaver.js"></script> -->
<script src="../dist/html-docx.min.js"></script>
<script src="./generate.js"></script>
</head>
<style>
#main,
#main1 {
height: 400px;
width: 630px
}
.list {
background: blue;
padding: 10px
}
.list .page {
background: yellow;
padding: 5px;
height: 20px;
}
.img {
padding: 50px;
}
table {
align-text: center;
width: 100%;
vertical-align: middle;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
table td,
table th {
width: 20%;
height: 40px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
table p {
text-indent: 0 !important;
text-align: center;
}
/*
@paramas
exportElement
*/
</style>
<body>
<div id="html-docx">
<div id="html-docx-config">
<div id="html-docx-config">
<!-- 页眉部分，text值为left/center/right,指示页眉靠左中右 -->
<div id="page-header" textAlign='right'>我的新世界</div>
<!-- 首页的内容即是该标签的内容，首页相同则titlePg为true，否则为false -->
<div id="first-page" titlePg='false'><div style='text-align: center;'>dfsdfsdf</div></div>
<!-- 如果需要目录则加改标签，如果不要则不加 -->
<div id="page-content"></div>
<!-- 如果需要换行则在换行的位置添加该标签，word会自动跳转到新的页面 -->
<div class="change-line"></div>
<!-- 页眉部分，text值为left/center/right,指示页眉靠左中右,页脚部分只显示页码 -->
<div id="page-footer"></div>
</div>
<h1>第一层</h1>
<p>111111111We all live in a yellow submarine, yellow submarine, yellow submarine, yellow submarine</p>
<h2>第二层</h2>
<p style="font-size: 30px">Images can also be exported if you source them as base64 DATA URI.</p>
<h3>第三层</h3>
<h3>第三层</h3>
<div id="main"></div>
<div id="main1"></div>
<div class="change-line"></div>
<div class="list">
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
</div>
<div class="img" style="text-align: center">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg"
style="padding-left:50px" />
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg"
style="padding-left:50px" />
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg"
style="padding-left:50px" />
</div>
<h1>第一层</h1>
<p>sdfsdfsdfsdfsd</p>
<table>
<tr>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
</tr>
<tr>
<td>
<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
</td>
<td>
<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
</td>
<td>
<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
</td>
<td>
<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
</td>
<td>
<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
</td>
<td>
<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
</td>
</tr>
</table>
</div>
<button id="convert">Convert</button>
<script>
var chart = echarts.init(document.getElementById("main"));
var chart1 = echarts.init(document.getElementById("main1"));
var option = {
legend: {
top: 'bottom',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
color: ['#29F34F', '#FFFF00', '#FFC000', '#FF0000'],
series: [
{
name: '访问来源',
type: 'pie',
// startAngle:90,
radius: '55%',
center: ['50%', '50%'],
label: {
position: 'inside',
formatter: ' {d}'
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
],
}
]
};
chart.setOption(option);
chart1.setOption(option);
</script>
<script>
// 这段代码用来处理style标签的样式
let list123 = []
let element = document.getElementsByClassName('style')
if (element.length) {
for (var i = 0; i < element.length; i++) {
list123.push(element[i].innerText.replace(/\s{2,}/g,''))
}
}
// 转换事件
$('#convert').click(function () {
HtmlToDocx({
exportElement: '#html-docx', // 需要转换为word的html标签
exportFileName: 'list.docx', // 转换之后word文档的文件名称
StringStyle: list123.join(''), // css样式以字符窜的形式插入进去
margins:{top: 1440,right: 1440,bottom: 1440,left: 1440,header: 720,footer: 720,gutter: 0} // word的边距配置
})
})
</script>
</body>
</html>