Layui 專案前端匯出Excel檔案總結（兩種方式）
最近朋友在維護一個幾年前的老專案，專案前端是基於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。並且支援複雜表頭的匯出、支援字型設定、單元格邊框設定、單元格合併等功能，這些是layuitable.exportFile 所不具備的
layui.excel匯出功能演示- 支援梳理匯出的資料並匯出多種格式資料- 支援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的引用。