最近这个项目中,涉及到了导出excel表格这个功能,这个后台管理使用的是layui这个框架,大体来说还是很方便,节省了很多的开发时间。
看layui的官网社区论坛,很多人都说layui自带的导出功能,只能导出当前页面的数据, 而且,部分的数据都是通过数据之间关联表查询出来的,用layui自带的导出数据会显示(Object),让人很头疼。
给大家看下后台 网站 要导出 用户信息表单:
导出表单按钮
<button class="layui-btn layui-btn-normal layui-btn data-add-btn" lay-event="yearexcel"> 导出今年Excel表单 </button>
/** * toolbar事件监听 */ table.on('toolbar(currentTableFilter)', function (obj) { if(obj.event === 'yearexcel' || obj.event === 'allexcel'){ var str = obj.event; var excelhref = '{:url("Tools/HandieExcel")}?excel='+str+'&table={$table}'; var index = layer.load(2); layer.msg('Excel 表格正在导出中吗,请勿进行其他操作'); $.ajax({ type:'GET', url:excelhref, dataType:'json', success:function(res){ if(res.code == 200){ // 1. 数组头部新增表头 res.data.unshift({ycqk: '牙齿症状',sex: '性别', age: '年龄',name:'姓名',phone:'电话',mytime:'页面时间',ym:'页面来源'}); // 2. 如果需要调整顺序,请执行梳理函数 var data = excel.filterExportData(res.data, [ 'ycqk', 'sex', 'age', 'name', 'phone', 'mytime', 'ym' ]); var result = excel.exportExcel({ sheet1: data }, '数据表格.xlsx', 'xlsx',{compression:true}); layer.close(index); } } }); } });
后台返回数据格式为:
{ "code":0, "msg":"", "count":3, "data":[ { id:'72632' "yack":'缺失2-3颗牙||5年以上||其他', "sex":"女", "age":"18", "name":"张三", "phone":'18000000000', "mytime":'xxxxxxxxxx', "ym":'2021/10/12 12:36:48' }, { id:'72631' "yack":'缺失2-3颗牙||5年以上||其他', "sex":"女", "age":"18", "name":"张三", "phone":'18000000000', "mytime":'xxxxxxxxxx', "ym":'2021/10/12 12:36:48' }, { id:'72630' "yack":'缺失2-3颗牙||5年以上||其他', "sex":"女", "age":"18", "name":"张三", "phone":'18000000000', "mytime":'xxxxxxxxxx', "ym":'2021/10/12 12:36:48' } ] }
导出内容截图
lay-excel github : https://github.com/wangerzi/layui-excel
lay-excel 在线文档: http://excel.wj2015.com/_book/
lay-excel 在线演示:http://excel.wj2015.com/
受教了