layui table 匯出
阿新 • • 發佈:2021-07-01
1.引入layui.excel外掛
Github:https://github.com/wangerzi/layui-excel
碼雲:https://gitee.com/wangerzi/layui-excel
2.匯出函式
//data: 表格資料 function ExportExcel(data) { //整理需要匯出的資料欄位 jsort=["name", "age"]; data = excel.filterExportData(data, jsort); //或者 data = excel.filterExportData(data, { name: function (value) { return { v: value, s: { //樣式 alignment: { horizontal: 'center', vertical: 'center' } } } } ,age: function (value) { return { v: value, s: { alignment: { horizontal: 'center', vertical: 'center' } } } } }); //表頭整理 var head={ name: { v: "名稱" //顯示的表頭 ,s: {//單元格樣式 alignment: { horizontal: 'center', //水平居中 vertical: 'center' //上下居中 } ,font: { color: { rgb: '333' } } //字型 } } ,age: { v: "年齡" //顯示的表頭 ,s: {//單元格樣式 alignment: { horizontal: 'center', //水平居中 vertical: 'center' //上下居中 } ,font: { color: { rgb: '333' } } //字型 } } }; data.unshift(head); //可以在第一行增加標題欄 let t_head = { name: { v: "測試表格", //標題 s: { alignment: { horizontal: 'center', vertical: 'center' } , font: { color: { rgb: 'ff5621' } } } } }; data.unshift(t_head); let marks = [['A1', 'D1']]; //合併標題欄,可根據表格列數進行合併 //其他單元格合併 // marks.push(['A2', 'A5']); // marks.push(['D2', 'F2']); //合併函式 var mergeConf = excel.makeMergeConfig(marks); //設定列寬 var colConf = excel.makeColConfig({ 'A': 180, 'B': 130, }, 120); //設定行高 var rowConf = excel.makeRowConfig({ 1: 30 , 2: 25 }, 20); //邊框(不能超過該行列數或該列的行數) //excel.setRoundBorder(data, 'A1:C1', { // top: { style: 'thick', color: { rgb: 'ff5621' } }, // bottom: { style: 'thick', color: { rgb: 'ff5621' } }, // left: { style: 'thick', color: { rgb: 'ff5621' } }, // right: { style: 'thick', color: { rgb: 'ff5621' } } //}); //匯出 excel.exportExcel(data, 'test.xlsx', 'xlsx', { extend: { '!merges': mergeConf , '!cols': colConf , '!rows': rowConf } }); }
3.呼叫:
var data = layui.table.cache["tbl_id"]; ExportExcel(data); ****注意在開頭要加入layui.excel var layer = layui.layer , form = layui.form , table = layui.table , excel = layui.excel , $ = layui.jquery;
更多參考來源:https://fly.layui.com/extend/excel/