<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>FileSaver.js demo</title>
<style type="text/css">
table {
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td,
table th {
border: 1px solid #333333;
color: #666;
width: 200px;
height: 30px;
}
table thead th {
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd) {
background: #fff;
}
table tr:nth-child(even) {
background: #F5FAFA;
}
.dc{
display: block;
text-align: center;
background-color: #31c27c;
color: #ffffff;
width: 150px;
height: 30px;
line-height: 30px;
font-size: 16px;
border-radius: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a id="dc" class="dc" href="javascript:void(0);" onclick="ExportUtil.toExcel('tb','车间能源消耗比例')">导出excel</a>
<table id="tb" style="border:1px solid #666666;text-align:center;cellspacing:0; cellpadding:0;">
<caption>
<h2>
车间能源消耗比例</h2>
</caption>
<thead>
<tr >
<th style="border:1px solid #666666;width:200px;">车间</th>
<th style="border:1px solid #666666;width:200px;">产量</th>
<th style="border:1px solid #666666;width:200px;">电量</th>
<th style="border:1px solid #666666;width:200px;">单耗</th>
<th style="border:1px solid #666666;width:200px;">时间</th>
</tr>
</thead>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
<tr>
<td style="border:1px solid #666666;width:200px;">109</td>
<td style="border:1px solid #666666;width:200px;">13</td>
<td style="border:1px solid #666666;width:200px;">1.34</td>
<td style="border:1px solid #666666;width:200px;">213</td>
<td style="border:1px solid #666666;width:200px;">2018-05-17 17:00:42</td>
</tr>
</table>
<script src="js/Blob.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/ExportUtil.js"></script>
</body>
</html>
js导出excel兼容IE6+和主流浏览器
2星 需积分: 43 49 浏览量
2018-05-27
17:36:45
上传
评论
收藏 8KB RAR 举报 
export-excel.rar （5个子文件） 
export-excel 
index.html 5KB js 
ExportUtil.js 3KB FileSaver.js 6KB Blob.js 6KB FileSaver.min.js 2KB资源评论
aisunp2aisunp22019-08-30没用，不支持复杂表头
qq_356567612018-07-24谷歌下导出一个没后缀的文件，内容正确，ie10下点击直接没有反应
LogenzLab2018-09-03IE需要打开ActiveX
