table2excel实现html页面table导出Excel
2018-12-25 本文已影响4人
Hank_谢旱
一 背景
这两天客户要求在一个页面做一个导出功能，这个页面比较复杂，数据都是通过js联动计算得出，也就是说页面展示的数据和数据库保存的是不一致的，是因为首先从数据库查询出来，再通过js将相关联字段计算得出要的值，因为这个所以给导出造成麻烦。
二 思考
1.如果通过poi来导出，是可行的，但是相当于将js的算法用java再来一遍，理论可行，但是耗时；
2.有没有其他方式直接将html页面数据抓取出来，省略计算过程，类似复制粘贴的方法?经过在网上查找相关解决方法，发现了table2excel这个插件。
三 使用
1.下载jquery.table2excel.js、jquery-3.2.1.min.js(其他版本也可以)，可以上网下载，也可使用我的Demo,最后会附网盘地址；
2.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html 表格导出</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.table2excel.js"></script>
<script language="JavaScript" type="text/javascript">
function ExportToExcel() {
$("#tableExcel").table2excel({
exclude : ".noExl", //过滤位置的 css 类名
filename : "表格导出.xls", //文件名称
name: "Excel Document Name.xlsx",
exclude_img: false,//是否导出图片 false导出
exclude_links: true,//是否导出链接 false导出
exclude_inputs: true//是否导出输入框的值 true导出
});
}
</script>
</head>
<body>
<div >
<button type="button" id="btnExport" onclick="ExportToExcel();">导出Excel</button>
</div>
<div id="myDiv">
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">html 表格导出道Excel</td>
</tr>
<tr class="noExl">
<td>列标题1</td>
<td>列标题2</td>
<td>类标题3</td>
<td>列标题4</td>
<td>列标题5</td>
</tr>
<tr>
<td>aaa</td>
<td colspan="2">bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td><img style="width:200px;height:100px;" src="img/test.jpg" /></td>
</tr>
<tr>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td><img style="width:200px;height:100px;" src="https://img2018.cnblogs.com/blog/1004756/201810/1004756-20181018111123383-202220146.png"/></td>
</tr>
</table>
</div>
</body>
</html>
3.页面
页面.png
4.说明
代码中有注释，跨行跨列都可以导出，在excel中也是原样展示；网络图片可以导出到excel中；tr或td设置css类名为noExl则该行或该列不导出到excel中5.扩展
找出插件代码的这一行，可以添加style样式，如下图所示
扩展.png
6.导出excel
网络图片导出到excel了
excel.png
四 Demo
链接：https://pan.baidu.com/s/1GcBZ-edMEE5LAya9hr0Klg
提取码：jal0
