layui導(dǎo)出Excel表格的方法代碼舉例

更新時間：2023年11月17日 09:47:32 作者：其斤r

使用了layui自帶的導(dǎo)出功能后,真的是超級便捷,下面這篇文章主要給大家介紹了關(guān)于layui導(dǎo)出Excel表格的方法代碼,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、利用layui自帶的excel導(dǎo)出功能

// 原始容器
<table id="demo" lay-filter="test"></table>
//JS 調(diào)用：
table.render({
  elem: '#demo'
  ,toolbar: '#toolbarDemo' // 重點，可默認(rèn)，也可自己設(shè)置按鈕
  ,defaultToolbar: ['filter', 'exports'], // exports為導(dǎo)出按鈕
  //,…… //其他參數(shù)
});

如下圖：

也可設(shè)置數(shù)據(jù)導(dǎo)出按鈕，通過方法導(dǎo)出任意數(shù)據(jù)，方法如下：

語法：

table.exportFile(id, data, type)

示例：

var ins1 = table.render({
    elem: '#demo1'
    ,id: 'test'
    // ,.... //其他參數(shù)
})
 
// 將上述表格示例導(dǎo)出為csv文件
table.exportFile(ins1.config.id, data); // data 為該實例中的任意數(shù)量的數(shù)據(jù)

該方法也可以不用依賴table的實例，可直接導(dǎo)出任意數(shù)據(jù)：

table.exportFile(['名字','性別','年齡'], [
  ['張三','男','20'],
  ['李四','女','18'],
  ['王五','女','19']
], 'csv'); //默認(rèn)導(dǎo)出 csv，也可以為：xls

二、使用第三方擴展插件：excel.js

1、下載插件放入項目中

2、前端界面設(shè)置button按鈕

<button class="layui-btn layui-btn-normal " lay-event="bgShow">導(dǎo)出</button>

3、獲取點擊事件

//頭工具欄事件
       layui.table.on('toolbar(table)', function (obj) {
            var checkStatus = layui.table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'bgShow':   //導(dǎo)出
                    exportFile("table", "XXXXX"); // 第一個參數(shù)：table；第二個參數(shù)為文件名稱
                    break;
            };
        });

4、table分頁，導(dǎo)出當(dāng)前頁內(nèi)容

function exportFile(id, titleInfo) {
 //根據(jù)傳入tableID獲取表頭
 var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
 var htrs = Array.from(headers.querySelectorAll('tr'));
 var titles = {};
 for (var j = 0; j < htrs.length; j++) {
     var hths = Array.from(htrs[j].querySelectorAll("th"));
     for (var i = 0; i < hths.length; i++) {
         var clazz = hths[i].getAttributeNode('class').value;
         if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
             //排除居左、具有、隱藏字段
             //修改:默認(rèn)字段data-field+i,兼容部分?jǐn)?shù)據(jù)表格中不存在data-field值的問題
             titles['data-field' + i] = hths[i].innerText;
          }
     }
  }

 //根據(jù)傳入tableID獲取table內(nèi)容
 var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
 var btrs = Array.from(bodys.querySelectorAll("tr"));
 var bodysArr = new Array();
 for (var j = 0; j < btrs.length; j++) {
    var contents = {};
    var btds = Array.from(btrs[j].querySelectorAll("td"));
    for (var i = 0; i < btds.length; i++) {
        for (var key in titles) {
            //修改:默認(rèn)字段data-field+i,兼容部分?jǐn)?shù)據(jù)表格中不存在data-field值的問題
            var field = 'data-field' + i;
            if (field === key) {
               //根據(jù)表頭字段獲取table內(nèi)容字段
               contents[field] = btds[i].innerText;
            }
        }
     }
     bodysArr.push(contents)
  }
  //將標(biāo)題行置頂添加到數(shù)組
  bodysArr.unshift(titles);
  // 導(dǎo)出excel
  layui.config({
     base: 'assets/libs/layui_extends/' // 插件路徑
  }).use(['excel'], function () {
     var excel = layui.excel;
     excel.exportExcel({
        sheet1: bodysArr
     }, titleInfo + new Date().toLocaleString() + '.xlsx', 'xlsx');
   });
}

5、導(dǎo)出全部數(shù)據(jù)

function exportFile(id, titleInfo) {

   $.ajax({
       url: 'xxxxxx', // 獲取數(shù)據(jù)的接口
       type: 'get',
       data: {},
       success: function (res) {
          if (res.code == 0) {
             var excelData = res.data;
             layui.config({
                base: 'assets/libs/layui_extends/'
             }).use(['excel'], function () {
                var excel = layui.excel;
                excelData = excel.filterExportData(excelData, [
                    'aaa','bbb','ccc' // 對應(yīng)需要導(dǎo)出的字段，根據(jù)后臺返回數(shù)據(jù)對應(yīng)需要字段
                ])
                // 對應(yīng)數(shù)據(jù)的表頭
                excelData.unshift({ aaa: 'aaa', bbb: 'bbb', ccc: 'ccc' });
                excel.exportExcel(excelData, titleInfo + new Date().toLocaleString() + '.xlsx', 'xlsx');
                        });
          } else {
               layer.closeAll();
               layer.msg("數(shù)據(jù)導(dǎo)出失敗", { icon: 2 });
          }
      },
      error: function (error) {
         console.log("獲取全部數(shù)據(jù)失?。?, error);
      }
   })
}