layui 导出 Excel表格的方法

一、使用layui自带的excel导出功能

1. // 原始容器
2. <table id="demo" lay-filter="test"></table>
3. //JS 调用：
4. table.render({
5.   elem: '#demo'
6.   ,toolbar: '#toolbarDemo' // 重点，可默认，也可自己设置按钮
7.   ,defaultToolbar: ['filter', 'exports'], // exports为导出按钮
8.   //,…… //其他参数
9. });

复制代码

如下图：

 也可设置数据导出按钮，通过方法导出恣意数据，方法如下：
语法：

1. table.exportFile(id, data, type)

复制代码

示例：

1. var ins1 = table.render({
2.     elem: '#demo1'
3.     ,id: 'test'
4.     // ,.... //其他参数
5. })
7. // 将上述表格示例导出为csv文件
8. table.exportFile(ins1.config.id, data); // data 为该实例中的任意数量的数据

复制代码

该方法也可以不用依靠table的实例，可直接导出恣意数据：

1. table.exportFile(['名字','性别','年龄'], [
2.   ['张三','男','20'],
3.   ['李四','女','18'],
4.   ['王五','女','19']
5. ], 'csv'); //默认导出 csv，也可以为：xls

复制代码

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

1、下载插件放入项目中

 
2、前端界面设置button按钮

1. <button class="layui-btn layui-btn-normal " lay-event="bgShow">导出</button>

复制代码

3、获取点击事件

1. //头工具栏事件
2.        layui.table.on('toolbar(table)', function (obj) {
3.             var checkStatus = layui.table.checkStatus(obj.config.id);
4.             switch (obj.event) {
5.                 case 'bgShow':   //导出
6.                     exportFile("table", "XXXXX"); // 第一个参数：table；第二个参数为文件名称
7.                     break;
8.             };
9.         });

复制代码

4、table分页，导出当前页内容

1. function exportFile(id, titleInfo) {
2. //根据传入tableID获取表头
3. var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
4. var htrs = Array.from(headers.querySelectorAll('tr'));
5. var titles = {};
6. for (var j = 0; j < htrs.length; j++) {
7.      var hths = Array.from(htrs[j].querySelectorAll("th"));
8.      for (var i = 0; i < hths.length; i++) {
9.          var clazz = hths[i].getAttributeNode('class').value;
10.          if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
11.              //排除居左、具有、隐藏字段
12.              //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
13.              titles['data-field' + i] = hths[i].innerText;
14.           }
15.      }
16.   }
18. //根据传入tableID获取table内容
19. var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
20. var btrs = Array.from(bodys.querySelectorAll("tr"));
21. var bodysArr = new Array();
22. for (var j = 0; j < btrs.length; j++) {
23.     var contents = {};
24.     var btds = Array.from(btrs[j].querySelectorAll("td"));
25.     for (var i = 0; i < btds.length; i++) {
26.         for (var key in titles) {
27.             //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
28.             var field = 'data-field' + i;
29.             if (field === key) {
30.                //根据表头字段获取table内容字段
31.                contents[field] = btds[i].innerText;
32.             }
33.         }
34.      }
35.      bodysArr.push(contents)
36.   }
37.   //将标题行置顶添加到数组
38.   bodysArr.unshift(titles);
39.   // 导出excel
40.   layui.config({
41.      base: 'assets/libs/layui_extends/' // 插件路径
42.   }).use(['excel'], function () {
43.      var excel = layui.excel;
44.      excel.exportExcel({
45.         sheet1: bodysArr
46.      }, titleInfo + new Date().toLocaleString() + '.xlsx', 'xlsx');
47.    });
48. }

复制代码

5、导出全部数据

1. function exportFile(id, titleInfo) {
3.    $.ajax({
4.        url: 'xxxxxx', // 获取数据的接口
5.        type: 'get',
6.        data: {},
7.        success: function (res) {
8.           if (res.code == 0) {
9.              var excelData = res.data;
10.              layui.config({
11.                 base: 'assets/libs/layui_extends/'
12.              }).use(['excel'], function () {
13.                 var excel = layui.excel;
14.                 excelData = excel.filterExportData(excelData, [
15.                     'aaa','bbb','ccc' // 对应需要导出的字段，根据后台返回数据对应需要字段
16.                 ])
17.                 // 对应数据的表头
18.                 excelData.unshift({ aaa: 'aaa', bbb: 'bbb', ccc: 'ccc' });
19.                 excel.exportExcel(excelData, titleInfo + new Date().toLocaleString() + '.xlsx', 'xlsx');
20.                         });
21.           } else {
22.                layer.closeAll();
23.                layer.msg("数据导出失败", { icon: 2 });
24.           }
25.       },
26.       error: function (error) {
27.          console.log("获取全部数据失败：", error);
28.       }
29.    })
30. }

复制代码

路漫漫其修远兮，吾将上下而求索！


来源：https://blog.csdn.net/weixin_38817361/article/details/129040044
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！