layui_excel导出功能详细使用

最近做一个项目用的是layui框架,本来用的是layui自带的导出,但是只能导出本页的数据,还有字段过长就变成###,开头为0会省略,故用了layui_excel这个插件,还是挺好用的

下载地址

链接: https://pan.baidu.com/s/17t7SizQbT0oWNJ2I-Ugbuw 提取码: vfpw 复制这段内容后打开百度网盘手机App,操作更方便哦
或者去gitee上下载:https://gitee.com/zypy333/layui-excel

使用步骤

在这里插入图片描述
1.导出按钮可以放到要展示的table上面

 <button type="button" lay-submit="" class="layui-btn layui-btn-warm" lay-filter="uploadImg">
        <i class="layui-icon"></i>导出Excel
    </button>

我代码放的位置是
在这里插入图片描述
2.使用之前用导入layui_excel 我是放到了layui同级目录下
在这里插入图片描述
3.config的设置是全局的

 layui.config({
        base: 'layui_exts/',//静态资源所在路径
    }).extend({
        excel: 'excel',
    });

4.layui.use中定义excel
在这里插入图片描述
5.使用使用ajax进行后台交互

form.on('submit(uploadImg)', function (data) {
// 模拟从后端接口读取需要导出的数据
		$.ajax({
			url: url
			,dataType: 'json'
			,success(res) {
				var data = res.data;
				// 重点!!!如果后端给的数据顺序和映射关系不对,请执行梳理函数后导出
				data = excel.filterExportData(data, [
					'id'
					,'username'
					,'experience'
					,'sex'
					,'score'
					,'city'
					,'classify'
					,'wealth'
					,'sign'
				]);
				// 重点2!!!一般都需要加一个表头,表头的键名顺序需要与最终导出的数据一致
				data.unshift({ id: "ID", username: "用户名", experience: '积分', sex: '性别', score: '评分', city: '城市', classify: '职业', wealth: '财富', sign: '签名' });

				var timestart = Date.now();
				excel.downloadExcel(data, '导出接口数据', 'xlsx');
				var timeend = Date.now();

				var spent = (timeend - timestart) / 1000;
				layer.alert('单纯导出耗时 '+spent+' s');
			}
			,error() {
				layer.alert('获取数据失败,请检查是否部署在本地服务器环境下');
			}
		});
	});

6.格式和layui返回的数据是一致的,我用的还是table中的接口,数据格式如:

{
    "code":0,
    "msg":"",
    "count":3,
    "data":[
        {
            "id":10000,
            "username":"user-0",
            "sex":"女",
            "city":"城市-0",
            "sign":"签名-0",
            "experience":255,
            "logins":24,
            "wealth":82830700,
            "classify":"作家",
            "score":57
        }
    ]
}

到此就结束了,文档还可以去gitee那个地址找到

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
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'是文件格式。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值