最近朋友在维护一个几年前的老项目，项目前端是基于Layui的。我那朋友只接触过vue以及vue相关的一些框架，对layui不熟悉，问我LayuI项目有个列表要加个excel导出功能，并且不能改动后端接口（后端接口代码已经没有了）
Layui excel导出—使用layui table.exportFile
我们知道layui table自带了Excel导出功能（table.exportFile），可以很方便的导出csv 或者 xls文件：
table.exportFile(id, data, type)
参数id：为列表的表格ID
参数data： 是传入的相应数据
参数type：导出的的文件类型（csv 或者 xls）
我们可以在列表查询表格数据加载完成的回调函数中将列表数据保存到本地
var listData = [];
table.render({
elem: '#表格ID'',
url: url
cols: [],
page: true,
limit: 15,
done: function(res, curr, count) {
//res.data 存储到本地变量
listData = res.data;
}
});
然后我们可以在导出事件里面传入该变量即可
table.exportFile('表格ID',listData,'xls' );
或者我们需要导出当前搜索条件下的所有数据：我们可以使用ajax调用不分页的数据接口，或者后台无法改动的话将列表数据获取接口，自己将分页参数的limit设置得很大临时解决下。
$.ajax({
url: url,
success: function(res){
table.exportFile('表格ID',res.data,'xls' );
}
});
另外table.exportFile方法也可以不用依赖 table 的实例，可直接导出任意数据
table.exportFile(['名字','性别','年龄'], [
['张三','男','20'],
['李四','女','18'],
['王五','女','19']
], 'csv'); //默认导出 csv，也可以为：xls
//没有传入表格ID，直接传入JSON数据
法二：
Layui excel导出 —使用 layui 的导出扩展插件 layui.excel excel
layui.excel扩展插件功能很强大，支持Layui插件形式加载，导出仅需一句话。
导出excel功能基于 XLSX.js，下载功能基于 FileSaver，读取文件基于 H5的 FileReader。并且支持复杂表头的导出、支持字体设置、单元格边框设置、单元格合并等功能，这些是layui table.exportFile 所不具备的
- 支持梳理导出的数据并导出多种格式数据- 支持IE、火狐、chrome等主流浏览器- 普通工作电脑最多支持9列45W行数据规模的导出- 支持 xlx、xlsx、csv格式的前端数据读取以及数据梳理- 支持单个文件多个 sheet 的导出- 提供方便的列合并辅助方法
最简单的用法，同table.exportFile
excel.exportExcel(data, 'excel文件名.xlsx', 'xlsx');
另外导出的时候支持列宽等样式的设置，可以通过extend参数传入列宽配置参数
layui.excel插件的使用
npm安装
$ npm i lay-excel
然后使用 import 引入并调用导出函数
import LAY_EXCEL from 'lay-excel';
LAY_EXCEL.exportExcel(data, '表格导出.xlsx', 'xlsx')
普通脚本引入方式
<script src="layui_exts/excel.js"></script>
LAY_EXCEL.exportExcel(data, '表格导出.xlsx', 'xlsx')
Layui插件引入
layui.use(['excel'], function (){
var excel = layui.excel; //导出逻辑layui.excel.exportExcel(data, '表格导出.xlsx', 'xlsx')
})如果是layadmin项目，可以把excel.js拷贝至lib/extend目录在config.js添加extend:excel的引用。