html-docx
Version:
html-docx ============
203 lines (190 loc) • 6.66 kB
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="./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 ;
text-align: center;
}
/*
@paramas
exportElement
*/
</style>
<body>
<div id="html-docx">
<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>
</body>
</html>
<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, ''))
}
}
// 转换事件
document.getElementById('convert').onclick = 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>