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

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

如下图：

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

语法：

table.exportFile(id, data, type)

示例：

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

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

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

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

1、下载插件放入项目中

2、前端界面设置button按钮

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

3、获取点击事件

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

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

function exportFile(id, titleInfo) {//根据传入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') {//排除居左、具有、隐藏字段//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题titles['data-field' + i] = hths[i].innerText;}}}//根据传入tableID获取table内容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) {//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题var field = 'data-field' + i;if (field === key) {//根据表头字段获取table内容字段contents[field] = btds[i].innerText;}}}bodysArr.push(contents)}//将标题行置顶添加到数组bodysArr.unshift(titles);// 导出excellayui.config({base: 'assets/libs/layui_extends/' // 插件路径}).use(['excel'], function () {var excel = layui.excel;excel.exportExcel({sheet1: bodysArr}, titleInfo + new Date().toLocaleString() + '.xlsx', 'xlsx');});
}

5、导出全部数据

function exportFile(id, titleInfo) {$.ajax({url: 'xxxxxx', // 获取数据的接口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' // 对应需要导出的字段，根据后台返回数据对应需要字段])// 对应数据的表头excelData.unshift({ aaa: 'aaa', bbb: 'bbb', ccc: 'ccc' });excel.exportExcel(excelData, titleInfo + new Date().toLocaleString() + '.xlsx', 'xlsx');});} else {layer.closeAll();layer.msg("数据导出失败", { icon: 2 });}},error: function (error) {console.log("获取全部数据失败：", error);}})
}

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

layui 导出 Excel表格的方法相关推荐

layui导出Excel表格自定义文件名称
预备操作 1.找到 /layui/lay/modules/table.js文件 2.搜索exportFile,找到d.exportFile=function(e,t,i) 修改为 d.exportFi ...
layui 导出 excel 表格
前言最近这个项目中,涉及到了导出excel表格这个功能,这个后台管理使用的是layui这个框架,大体来说还是很方便,节省了很多的开发时间. 看layui的官网社区论坛,很多人都说layui自带的导出 ...
后台管理系统导出Excel表格的方法
//导出Excel公共方法function excelExport(colums,queryParams,objectName,baseUrl,sysUrl,body,title){if(colums ...
layui导出excel表格
1.layui官网自带的常规导出方法,这种方法可以导出任意数据表,但是这样不能自定义导出表明. table.exportFile(['名字','性别','年龄'], [['张三','男','20'], ...
React，导出Excel表格的方法
前端点击按钮导出Excel表,以下方法,前提是让后端返回的文件流可以直接请求下载. 意思就是:你通过在浏览器请求接口,传参就可以直接下载文件. 方法一: window.open('请求地址') 适用于 ...
使用python将数据导出excel表格
python可用于数据分析,有时候获得了数据需要导出以作其他作用.本文就介绍python导出excel表格的方法. 导出excel表格,python提供了两个库:xlwt,xlrd.本文只讨论 ...
Thinkphp导入、导出Excel表格
Thinkphp中导出Excel表格具体方法如下: 1.在ThinkPHP/Library/Vendor目录下新建文件夹PHPExcel,将excel文件解压后放入文件夹中. (下载地址:链接:htt ...
vue使用xlsx、xlsx-style和fileSaver导出excel表格
本文引用 xlsx-style坑记录 Vue使用xlsx和xlsx-style纯前端导出带样式的Excel vue导出Excel表格,报错utils of undefined 是版本原因前期准备工作 ...
前端 table 导出excel表格方法
需求:获取后台数据,动态生成table后,导出excel表格,要求格式与table格式一致直接上代码: <a id="export">导出</a> < ...

layui 导出 Excel表格的方法

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

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

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

layui 导出 Excel表格的方法相关推荐

最新文章

热门文章