由于经常要做一些导出报表的工具,所以必须要掌握至少两种快速导出报表的方案:1、导出当前html页面数据到excel,即可以PHP也可以javascript进行导出; 2、导出所有页面数据到excel,这个就必须要PHP进行导出了。
这次要进行导出的为两个table中的数据,如果用PHP进行导出,要画两个不同的表头,时间上不划算,直接使用javascript进行导出,省点时间。
注:使用javascript导出excel要用到layui.excel组件。
步骤:
1、引入js相关库:
<link rel="stylesheet" type="text/css" href="{$Think.PLUGINS_SITE_ROOT}/layuiv2.4.3/css/layui.css"> <script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/layuiv2.4.3/layui.js"></script> <script type="text/javascript"> layui.config({ base: '{$Think.PLUGINS_SITE_ROOT}/layuiv2.4.3/lay/extend/' }).extend({ excel: 'excel' }); </script>
2、导出excel核心代码:
<script> layui.use(['jquery', 'layer', 'excel', 'table'], function(){ var $ = layui.jquery; var layer = layui.layer; var excel = layui.excel; function exportFile() { var member_name = $('#exportexcel').attr('dataname');//用户名称 var tableArr1 = new Array(); var tableArr2 = new Array(); var title1 = new Array(); var title2 = new Array(); //获取table表头信息 var headers = $(".zt-table .thead:last th"); for (var j = 0; j < headers.length; j++) { var tmp = $(headers[j]).text(); title1.push(tmp); } //获取table数据内容 var tr1 = $(".zt-table tbody tr"); for (var j = 0; j < tr1.length; j++) { var contents = new Array(); var tds = $('td', tr1[j]); for (var i = 0; i < tds.length; i++) { contents[i] = $(tds[i]).text(); } tableArr1.push(contents); } //将标题行置顶添加到数组 tableArr1.unshift(title1); //获取第二个表头 var headers = $(".jt-table .thead:last th"); for (var j = 0; j < headers.length; j++) { var tmp = $(headers[j]).text(); title2.push(tmp); } //获取第二个table数据内容 var tr1 = $(".jt-table tbody tr"); for (var j = 0; j < tr1.length; j++) { var contents = new Array(); var tds = $('td', tr1[j]); for (var i = 0; i < tds.length; i++) { contents[i] = $(tds[i]).text(); } tableArr2.push(contents); } //将标题行置顶添加到数组 tableArr2.unshift(title2); console.log(tableArr1); //导出excel excel.exportExcel({ '直接推荐':tableArr1 ,'间接推荐':tableArr2 }, '用户手机[' + member_name + ']推荐代理商列表' + new Date().toLocaleString() + '.xlsx', 'xlsx'); } /** * 页面加载事件 */ $(function(){ $('#exportexcel').off('click').on('click', function(){ exportFile(); }); }); }); </script>
3、页面示例:
4、导出效果:
写在最后:这种导出方案实在是太方便了,两个表格的header不同的时候,JS导出最为方便。
作者:OK兄 浏览次数:140