首页layui导出excel

layui导出excel

时间: 2024-03-19 15:38:45 浏览: 139

layui是一款基于jQuery的前端UI框架，它提供了丰富的组件和功能，包括导出Excel功能。在layui中，可以使用table.exportFile()方法来实现导出Excel的功能。具体步骤如下： 1. 引入layui框架和相关样式文件。 2. 创建一个表格，并使用layui的table组件进行渲染。 3. 在需要导出Excel的按钮点击事件中，调用table.exportFile()方法来导出Excel文件。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui导出Excel示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> layui.use(['table', 'excel'], function(){ var table = layui.table; var excel = layui.excel; // 渲染表格 table.render({ elem: '#demo', url: '/api/getData', // 数据接口 cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} ]] }); // 导出Excel按钮点击事件 $('#exportBtn').on('click', function(){ var data = table.cache['test']; // 获取表格数据 excel.exportExcel({ sheet1: data }, '导出数据.xlsx', 'xlsx'); }); }); </script> </body> </html> ``` 在上述示例代码中，我们使用了layui的table组件来渲染表格，并通过url参数指定了数据接口。在导出Excel按钮的点击事件中，我们调用了excel.exportExcel()方法来导出Excel文件，其中的sheet1参数是要导出的数据，'导出数据.xlsx'是导出的文件名，'xlsx'是文件格式。

阅读全文