<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://huangbohang.github.io/export-word/dist/export-word.js"></script>以上是需要导出的js文件
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://huangbohang.github.io/export-word/dist/export-word.js"></script>
<style>
.main{
width:800px;
margin: auto;
}
.bs-example-bg-classes p {
padding: 15px;
}
#echart-block{
width: 500px;
height: 300px;
}
button{
position: fixed;
left: 0;
top: 20px;
}
</style>
</head>
<body>
<div class="main ">
<h1>echart图表</h1>
<div id="echart-block" class="need-to-img"></div>
<
<h1>table</h1>
<div>
<table class="table " >
<tr>
<th rowspan="2">范围</th>
<th rowspan="2">月份</th>
<th rowspan="2">断面数</th>
<th colspan="2">Ⅰ</th>
<th colspan="2">Ⅱ</th>
<th colspan="2">Ⅲ</th>
<th colspan="2">Ⅳ</th>
<th colspan="2">Ⅴ</th>
<th colspan="2">劣Ⅴ</th>
<th colspan="2">Ⅰ-Ⅱ</th>
<th colspan="2">Ⅰ-Ⅲ</th>
</tr>
<tr>
<th>个数</th>
<th>比例(%)</th>
<th>个数</th>
<th>比例(%)</th>
<th>个数</th>
<th>比例(%)</th>
<th>个数</th>
<th>比例(%)</th>
<th>个数</th>
<th>比例(%)</th>
<th>个数</th>
<th>比例(%)</th>
<th>个数</th>
<th>比例(%)</th>
<th>个数</th>
<th>比例(%)</th>
</tr>
</table>
<table class="table " >
<tr>
<th>日期</th>
<th>姓名</th>
<th>地址</th>
</tr>
<tr>
<td>2016-05-02</td>
<td>王小虎</td>
<td>上海市普陀区金沙江路 1518 弄'</td>
</tr>
<tr>
<td>2016-03-21</td>
<td>张小花</td>
<td>上海市普陀区金沙江路 1512 弄'</td>
</tr>
<tr>
<td>2016-01-4</td>
<td>李晓东</td>
<td>上海市普陀区金沙江路 1513 弄'</td>
</tr>
<tr>
<td>2016-04-02</td>
<td>王大哈</td>
<td>上海市普陀区金沙江路 1522 弄'</td>
</tr>
<tr>
<td>2016-05-12</td>
<td>李晓春</td>
<td>上海市普陀区金沙江路 1518 弄'</td>
</tr>
</table>
</div>
</div>
<button type="button" class="btn btn-primary">download</button>
<script>
var myChart = echarts.init(document.getElementById('echart-block'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
</script>
<script>
//需要导出的片段
const wrap = document.querySelector('.main')
document.getElementsByTagName('button')[0].onclick = function(){
exportWord(wrap,{
fileName:'测试文件',//导出的名字
toImg:['.need-to-img']//需要转成图片的片段
})
}
</script>
</body>
</html>