最近朋友在維護一個幾年前的老項目，項目前端是基於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 的導出- 提供方便的列合並輔助方法
layui.excel導出功能演示
最簡單的用法，同table.exportFile
excel.exportExcel(data, 'excel文件名.xlsx', 'xlsx');
另外導出的時候支持列寬等樣式的設置，可以通過extend參數傳入列寬配置參數
excel.exportExcel 導出列寬設置
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的引用。