参考：https://fly.layui.com/jie/51262/
重点：先引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>导出表格数据的DEMO</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<style>
body {
margin: 10px;
} .layui-table-tool-temp {
padding-right: 0;
margin-right: 0;
/*text-align: right;*/
} .yutons,
.layui-btn-sm {
margin-top: -2px;
} /* 修改头部工具右侧筛选、导出、打印样式 */
.yutons-header-tool {
margin-top: -2px;
width: 30px !important;
height: 30px !important;
background-color: #ffffff;
} /* 修改右侧筛选、导出、打印出发的ul标签定位 */
.layui-table-tool-panel {
left: auto;
right: -1px;
} /* div 右侧10px */
.yutons-btn-margin-right {
margin-right: 10px;
line-height: 40px;
}
</style>
</head>
<body>
<blockquote class="layui-elem-quote">
鉴于layui自带的导出功能不是很完善，存在问题如下：</br>
问题1：导出长数字，后几位强制变成0；</br>
问题2：时间日期格式导出默认为时间或日期，无法显示完整的日期+时分秒格式</br>
问题3：文本内容中包含','(小写逗号)时，导出excel默认将字符串以逗号拆分成多个excel表格</br>
问题4：如果在table渲染时您采用了模板引擎对数据进行了二次渲染，对不起，layui提供的excel导出无法获取到您渲染后的数据（此测试页面未对该问题进行还原，请自行测试）</br>
问题详情请参照当前页面layui自带导出工具导出查询</br>
解决方案如下：</br>
1、点击左侧导出按钮导出，解析当前table可视范围内数据以字符串格式输出，默认调用excel.exportExcel方法</br>
2、重写头部工具栏，避免修改table源码，触发导出</br>
3、支持根据筛选导出内容数据</br>
4、修改因部分表格数据不存在data-field字段值的情况下无法正常导出的bug<br/>
5、修复IE不识别Array.from的问题，兼容IE<br/>
存在问题：1、暂时未对复杂表头进行测试；2、暂时未对自定义样式进行测试
</blockquote>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-row">
<div class="layui-col-md2 layui-col-sm3 layui-col-xs6" style="text-align: left;padding-left: 10px;">
<div class="layui-input-inline yutons-btn-margin-right">
<span class="layui-btn yutons layui-btn-sm yutons-color-detail" lay-event="table_export">导出</span>
</div>
</div>
<div class="layui-col-md10 layui-col-sm9 layui-col-xs6" style="text-align: right;">
<div class="layui-input-inline yutons-btn-margin-right">
<span class="layui-btn yutons layui-btn-sm yutons-color-detail" lay-event="YutonsCallCenterWorkOrderSearch"
id="YutonsCallCenterWorkOrderSearch">查询</span>
</div>
<div class="layui-input-inline yutons-btn-margin-right" style="margin-right: 0px;">
<span class="layui-inline yutons-header-tool" title="筛选列" lay-event="LAYTABLE_COLS">
<i class="layui-icon layui-icon-cols"></i></span>
<span class="layui-inline yutons-header-tool" title="导出" lay-event="table_export">
<i class="layui-icon layui-icon-export"></i></span>
<span class="layui-inline yutons-header-tool" title="导出" lay-event="LAYTABLE_EXPORT">
<i class="layui-icon layui-icon-export"></i></span>
<span class="layui-inline yutons-header-tool" title="打印" lay-event="LAYTABLE_PRINT">
<i class="layui-icon layui-icon-print"></i>
</span>
</div>
</div>
</div>
</script>
<script src="../layui/layui.js"></script>
<script>
layui.config({
base: '../layui_exts/'
}).use(['table', 'excel'], function() {
var table = layui.table //表格
,
$ = layui.$,
excel = layui.excel; //执行一个 table 实例
table.render({
elem: '#demo',
height: 420,
url: , //数据接口
where:{"id":10},
title: '用户表',
page: true, //开启分页
toolbar: '#toolbarDemo', //操作1:启用自定义模板表格头部工具栏
defaultToolbar: [], //操作2:隐藏头部工具栏右侧的图标
cols: [
[ {field:'id', title:'ID',align: 'center'}
,{field:'name', title:'名字',align: 'center'}
]
]
}); //监听头工具栏事件
table.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id),
data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'table_export':
exportFile('demo')
break;
};
});
/**
* by yutons
* Array.from() 非常方便的将一个类数组的集合 ==》 数组，直接使用数组身上的方法。例如：常用的map，foreach…
* 但是，问题来了，IE不识别Array.from这个方法。所以写了它兼容IE的写法。
*/
if (!Array.from) {
Array.from = function(el) {
return Array.apply(this, el);
}
}
//表格导出
function exportFile(id) {
//根据传入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);
//导出excel
excel.exportExcel({
sheet1: bodysArr
}, '用户表' + new Date().toLocaleString() + '.xlsx', 'xlsx');
}
});
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
