要在
layui table
表格中实现
导出操作，需要使用第三方插件，如tableX、tableExport等。这里以tableX为例，具体实现步骤如下：
1. 引入tableX插件和相关依赖文件
```html
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/js-xlsx/0.8.0/xlsx.full.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blobjs/1.1.1/Blob.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/tableExport.jquery.plugin/1.0.3/js/tableExport.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/table-x/1.0.2/js/table-x.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/table-x/1.0.2/css/table-x.min.css">
```
2. 在table的初始化配置中添加
导出按钮
```javascript
table.render({
elem: '#demo',
url: '/data',
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', minWidth: 200},
{field: 'sex', title: '性别', width: 80, sort: true},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', minWidth: 200},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true},
]],
page: true,
toolbar: 'default', //开启头部工具栏，并为其绑定左侧模板
defaultToolbar: ['exports', 'print', 'filter'], //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
done: function(res, curr, count) {
tableExport.render({
elem: '#demo',
filename: '
数据列
表',
sheetName: 'Sheet1',
type: 'xlsx',
title: '
数据列
表',
page: true,
style: 'border: 1px solid #ddd;text-align: center;'
});
}
});
```
其中，toolbar配置项开启头部工具栏，并为其绑定左侧模板；defaultToolbar配置项自定义头部工具栏右侧图标，其中'exports'
表示
导出按钮。
3. 实现
导出功能
```javascript
tableExport.render({
elem: '#demo',
filename: '
数据列
表',
sheetName: 'Sheet1',
type: 'xlsx',
title: '
数据列
表',
page: true,
style: 'border: 1px solid #ddd;text-align: center;'
});
```
其中，elem
表示要
导出的table元素的选择器，filename
表示
导出文件名，sheetName
表示
导出文件的sheet名称，type
表示
导出文件
类型，title
表示
导出文件的标题，page
表示是否
导出分页，style
表示
导出文件的样式。
4. 完整代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
layui表格导出操作</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/js-xlsx/0.8.0/xlsx.full.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blobjs/1.1.1/Blob.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/tableExport.jquery.plugin/1.0.3/js/tableExport.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/table-x/1.0.2/js/table-x.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/table-x/1.0.2/css/table-x.min.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
layui.use(['table', 'tableExport'], function() {
var table =
layui.table;
var tableExport =
layui.tableExport;
table.render({
elem: '#demo',
url: '/data',
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', minWidth: 200},
{field: 'sex', title: '性别', width: 80, sort: true},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', minWidth: 200},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true},
]],
page: true,
toolbar: 'default',
defaultToolbar: ['exports', 'print', 'filter'],
done: function(res, curr, count) {
tableExport.render({
elem: '#demo',
filename: '
数据列
表',
sheetName: 'Sheet1',
type: 'xlsx',
title: '
数据列
表',
page: true,
style: 'border: 1px solid #ddd;text-align: center;'
});
}
});
});
</script>
</body>
</html>
```
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
