layui table 自定义导出
时间: 2023-10-05 18:05:40 浏览: 150
layui实现数据表格自定义数据项
如果你使用的是 layui 的 table 组件,可以使用 table.exportFile 方法来实现自定义导出。这个方法允许你传入一个数据数组和一个配置对象,来自定义导出的内容和格式。
以下是一个示例代码,可以将表格数据以 JSON 格式导出:
```javascript
// 导出 JSON 文件
function exportJson() {
var data = table.cache.myTable; // 获取表格数据
var filename = 'data.json'; // 导出文件名
var content = JSON.stringify(data, null, 2); // 转为格式化后的 JSON 字符串
var blob = new Blob([content], {type: 'text/plain;charset=utf-8'}); // 创建 Blob 对象
saveAs(blob, filename); // 使用 FileSaver.js 下载文件
}
// 保存文件的函数,使用 FileSaver.js 库
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
// IE10+
window.navigator.msSaveOrOpenBlob(blob, filename);
} else {
// Others
var a = document.createElement('a');
var url = URL.createObjectURL(blob);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}
```
在配置表格时,可以为表格添加一个 “导出” 按钮,绑定上面的导出函数:
```javascript
table.render({
elem: '#myTable',
data: data,
cols: cols,
toolbar: '#toolbar', // 绑定工具栏
defaultToolbar: ['filter', 'exports'], // 显示筛选和导出按钮
done: function() {
// 绑定导出按钮事件
$('.layui-table-tool-temp .layui-btn[data-event="exportJson"]').click(exportJson);
}
});
```
这样就可以在表格上方显示一个导出按钮,点击它就可以将表格数据以 JSON 格式导出了。
阅读全文