扩展 layui 的导出插件 layui.excel

分享 未结 77 8052
藏锋入鞘丨
悬赏:20飞吻
环境提示:预览环境需要部署在服务器下,不然无法异步获取需要导出的数据
之前在工作过程中还有社区交流过程中,发现对导出 Excel 文件有需求,所以就萌发了封装插件的想法。导出excel功能基于 XLSX.js,下载功能基于 FileSaver,读取文件基于 H5的 FileReader。
GIT仓库(最新的代码和文档均在GITHUB,社区更新可能不及时)
https://github.com/wangerzi/layui-excel
浏览器兼容性
支持 IE10+、Firefox、chrome 等主流浏览器

功能演示:
在线演示:
http://excel.wj2015.com
功能预览:
花式设置样式:

导出数据测试和导出接口数据:

导出复杂表头、样式和公式:

导入数据:

加群交流:
QQ群号:555056599

期望收集

函数列表


重要函数参数配置



fields参数设计
在实际使用的过程中,后端给的参数多了,或者字段数据不符合导出要求,这都是很常见的情况。为了导出数据的顺序正确和数据映射正确,于是新增了这个方法。

fields 用于表示对象中的属性顺序和映射关系,支持『数组』、『对象』、『回调函数』三种方式

假如后台给出了这样的数据:
{
"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,
"start": '2018-12-29',
"end": "2018-12-30"
}
]
}







使用方法请查看 GITHUB文档,由于篇幅原因不再贴出

功能概览
- 支持梳理导出的数据并导出多种格式数据
- 支持IE、火狐、chrome等主流浏览器
- 普通工作电脑最多支持9列45W行数据规模的导出
- 支持 xlx、xlsx、csv格式的前端数据读取以及数据梳理
- 支持单个文件多个 sheet 的导出
- 提供方便的列合并辅助方法
使用方法
JS使用样例:
// 注:lay_exts/ 为扩展中所有文件的存放路径
layui.config({
base: 'lay_exts/',
}).extend({
excel: 'excel',
});
layui.use(['jquery', 'excel', 'layer'], function() {
var $ = layui.jquery;
var layer = layui.layer;
var excel = layui.excel;

// 模拟从后端接口读取需要导出的数据
$.ajax({
url: 'list.json'
,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.exportExcel(data, '导出接口数据', 'xlsx');
var timeend = Date.now();

var spent = (timeend - timestart) / 1000;
layer.alert('单纯导出耗时 '+spent+' s');
}
,error() {
layer.alert('获取数据失败,请检查是否部署在本地服务器环境下');
}
});
});
导出数据返回样例:
{
"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
},
{
"id":10001,
"username":"user-1",
"sex":"男",
"city":"城市-1",
"sign":"签名-1",
"experience":884,
"logins":58,
"wealth":64928690,
"classify":"词人",
"score":27
},
{
"id":10002,
"username":"user-2",
"sex":"女",
"city":"城市-2",
"sign":"签名-2",
"experience":650,
"logins":77,
"wealth":6298078,
"classify":"酱油",
"score":31
}
]
}
更新预告
v1.6 支持快速设置边框,分段递归获取数据函数封装,新增常见问题总览
更新记录
2019-03-11 v1.5 打包依赖方便使用并增加兼容性,支持花式设置样式,正式支持导入,修复各种BUG
2019-01-13 v1.4 魔改xlsx-style以支持设置样式、列宽、行高、公式等,并提供相应的辅助方法生成需要的配置信息
2018-01-09 v1.3 支持导出多个sheet,合并导出的列,~~设置单元格样式~~(插件限制,暂未解决)
2019-01-04 v1.2 支持前端多文件多Sheet读取 Excel 数据并梳理数据格式,大量数据导出效率优化
2018-12-29 v1.1 重写内部下载逻辑,支持IE、Firefox、chrome等主流浏览器,梳理数据函数支持回调
2018-12-14 v1.0 最初版本
回帖
  • @flyer918245 现在的 filterExportData支持回调的方式改变某一列的值。
    0 回复
  • @Zlheb 可能是因为缓存数据是同步导出,会阻塞主进程,而接口获取数据是异步的导出,在导出的同时还能做其他事情,所以感觉不卡。
    0 回复
  • 楼主 !用这个插件还可以做导入的,我目前就用的,但是还是有那个字段属性中英文的问题,不知道您是怎么解决的。XLS 里面写的字段名都是中文,传到后台需要 替换成 英文的。感谢回答
    0 回复
  • @flyer918245 字段属性的中英文是什么意思呢?对象的key么?如果有样例数据说明下就更好理解了[思考]
    0 回复
  • 是的

    [{
    '客户':'社区',
    '地址':'安徽'

    },{
    '名称':'名次',
    '年龄':'18'
    }]


    我用这个插件导入数据的时候,拿到的是这样的格式,我传给后台时,对象的key要和后台字段是一样的。比如
    客户 我要修改成cst 。然后在传给后台的。有提供这样的转换吗@藏锋入鞘丨
    0 回复
  • 斯考特
    2019-1-3
    楼主有心了,感谢大佬!可惜我这边用不成,要支持IE8,我再自己琢磨下吧
    0 回复
  • @flyer918245 如果没有想错的话,可以使用 filterExportData 梳理一下,比如你说的 「客户」 重命名为 「cst」,「地址」重命名为「address」,就可以这样写:
    filterExportData(data, {
    'cst': '客户',
    'address': '地址'
    });
    然后得到的类似这样的数据
    [
    {'cst': '社区', ‘address’: '安徽'}
    ]
    0 回复
  • @斯考特 IE8,不支持 Object.keys,会导致XLXS不可以用,[挖鼻] !然后看了下官方的 table.exportFile() 也是不支持的!
    0 回复
  • @flyer918245 如果用 filterExportData 的话,最好用最新的 GITHUB 上的代码,因为今天规范了下梳理字段的 key/value 顺序,我刚刚的写法是最新的 filterExportData 的传参方式!
    0 回复
  • 锁哥
    2019-1-3
    楼主啊,这个表头样式可以设置吗?
    0 回复