最近做一个项目用的是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那个地址找到

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐