1. 程式人生 > 其它 >layui table 匯出

layui table 匯出

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/