一、前言二、使用 LAY_EXCEL1、搜索2、使用3、快速开始的内容4、使用5、Layui下载 与 LAY_EXCEL下载 的区别6、Layui第三方扩展LAY_EXCEL自定义导出数据类型
一、前言
由于layui自带的数据表格导出excel存在兼容性问题：导出的表格不能修改内容，提示如下：
选择是之后，关闭文件，再次打开，还是修改前的内容。
Layui 数据表格导出数据
二、使用 LAY_EXCEL
1、搜索
百度搜索关键字layui第三方组件，选择网址为 https://fly.layui.com/extend/，进入到 layui 组件页面输入excel搜索第三方插件，找到扩展 layui 的导出插件 layui.excel，点击进去。找到我们需要用的：第三方插件源码码云（国内下载较快）： https://gitee.com/wangerzi/layui-excel、第三方插件在线文档在线文档（请以此文档为准，layui插件中文档维护不及时）
2、使用
找到在线文档里的 快速上手 目录， 去看看
3、快速开始的内容
方式内容
数据获取方式Ajax请求获取LAY_EXCEL使用方式1、layui配置中引入excel，通过excel的方式使用；2、直接引入excel.js，通过全局变量LAY_EXCEL调用表格数据1、默认没有表头，我们可以通过data.unshift的方式在数组的最前面压入表头数据。2、还可以通过excel.filterExportData()方法控制数组字段的显示（哪些需要显示，像id,status这些字段一般不需要导出）与排序
4、使用
这里给出个demo，大家可以在此基础上继续完善，封装，比如把这个导出的逻辑直接写在公共Js文件中，在公共的Js文件中通过layui config的方式引入excel，这样我们就不需要每次导出的地方都引入Excel了。这里我们把excel.js代码直接放在...\lay\modules目录下代码如下：
<html>
<button class="layui-btn" id="export-id">
<i class="layui-icon layuiadmin-button-btn">导出
</i>
</button>
<table id="table-id"></table>
</html>
<script>
layui.use(['element', 'table', 'form', 'jquery', 'laydate', 'layer', 'excel'], function () {
let table = layui.table;
let form = layui.form;
let layer = layui.layer;
let excel = layui.excel;
let $ = layui.jquery;
let exportData = {};
let tableObj = table.render({
elem: '#table-id'
,url: '/.../.../...'
,cols: [[
{field: 'name', align:'center',title: '姓名'}
,{field: 'hobby', title: '爱好'}
,{field: 'create_time', title: '创建时间'}
]]
,text: {
none: '暂无数据！'
}
,where:{'target_date':'2020-02'}
,page: false
,parseData: function(res) {
exportData = res.data.data;
return {
code: res.code,
msg: res.msg,
count: res.data.count,
data: res.data.data
}
}
});
$("#export-id").click(function(){
downloadLayExcel('Excel文件名', exportData, tableObj);
})
function downloadLayExcel(tableName, tableData, tableObject, tableType = 'xls') {
let tableHeader = {};
let field = [];
let data = [];
let cols = [];
try{
cols = tableObject.config.cols[0];
}catch(e) {
}
if (cols.length == 0) {
return layer.msg('表格对象属性异常');
}
$.each(cols, function(key, value) {
if (value.title != '操作') {
tableHeader[value.field] = value.title;
field.push(value.field);
}
});
if (!$.isEmptyObject(tableHeader) && field.length != 0) {
data = excel.filterExportData(tableData, field);
data.unshift(tableHeader);
excel.exportExcel({sheet1: data}, tableName + '.' + tableType, tableType);
} else {
layer.msg('数据异常');
}
}
});
</script>
5、Layui下载 与 LAY_EXCEL下载 的区别
Layui下载是根据tableObj.config.id获取表格的标题，字段等信息，然后自动打印在Excel中LAY_EXCEL表格的标题data.unshift()，字段信息excel.filterExportData()，需要自己手动设置
6、Layui第三方扩展LAY_EXCEL自定义导出数据类型
Layui第三方扩展LAY_EXCEL自定义导出数据类型
