layui_excel导出功能详细使用
最近做一个项目用的是layui框架,本来用的是layui自带的导出,但是只能导出本页的数据,还有字段过长就变成###,开头为0会省略,故用了layui_excel这个插件,还是挺好用的下载地址链接: https://pan.baidu.com/s/17t7SizQbT0oWNJ2I-Ugbuw 提取码: vfpw 复制这段内容后打开百度网盘手机App,操作更方便哦或者去gitee上下载:https
文章共1,562字 · 阅读需要大约6分钟
一键AI生成摘要,助你高效阅读
问答
·
最近做一个项目用的是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条内容
所有评论(0)