情境
由于项目需要,要求导出excel表格,具体描述,从前端table标签中直接将数据导出成Excel表格。
1、使用的jqGrid表格插件,可以导出筛选查询后的表格内容成Excel。
2、直接用table标签,进行测试,可以把table标签内的数据导出成Excel。
准备
1、tableExport.js(这是修改过后的压缩包,官网下载的存现问题)
链接:https://pan.baidu.com/s/1fmEXF_8Bt4xqNz2QBFKUjg
提取码:c2bh
2、FileSaver.js
链接:https://pan.baidu.com/s/1AwOG7F2lV03peMu-h74rJw
提取码:ufuh
3、jquery.js
链接:https://pan.baidu.com/s/1iNvpyr6Ly4M6I5KCk5KFEA
提取码:alpf
下载路径:
注意:不支持IE浏览器(划重点)
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title></title>
</head>
<!-- 这个是所有jquery插件的基础,首先第一个引入 -->
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<!-- 表格导出成excel、json、xml 等 -->
<!-- jquery Plugin(jquery插件添加)-->
<script type="text/javascript" src="tableExport.jquery.plugin-master/tableExport.js"></script>
<script type="text/javascript" src="tableExport.jquery.plugin-master/jquery.base64.js"></script>
<!-- jquery Plugin(jquery插件添加)-->
<script type="text/javascript" src="tableExport.jquery.plugin-master/html2canvas.js"></script>
<!-- PDF Export(导出PDF需要添加插件)-->
<script type="text/javascript" src="tableExport.jquery.plugin-master/jspdf/libs/sprintf.js"></script>
<script type="text/javascript" src="tableExport.jquery.plugin-master/jspdf/jspdf.js"></script>
<script type="text/javascript" src="tableExport.jquery.plugin-master/jspdf/libs/base64.js"></script>
<!-- Excel Export(导出Excel需要添加插件)-->
<script type="text/javascript"src="FileSaver.js-master/dist/FileSaver.min.js"></script><!--bootStrap中的js-->
<body>
<button type="button" onclick="exportExcel()">导出excel</button>
<table id="table_1" border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
</tr>
<tr>
<td>zhangSan</td>
<td>10</td>
<td>study</td>
</tr>
<tr>
<td>里斯</td>
<td>15</td>
<td>写代码</td>
</tr>
</table>
</body>
<script type="text/javascript">
function exportExcel(){
$('#table_1').tableExport(
{
type:'excel',
fileName: new Date().getTime(),
escape:'false'
}
);
}
</script>
</html>