Layui 第三方扩展组件平台

返回首页 发布组件

现有Excel操作前端库中,XLSX.JS功能强大但是操作颇为不便,于是封装了此插件,依赖jQuery,支持Layui插件形式加载,导出仅需一句话。 导出excel功能基于 XLSX.js,下载功能基于 FileSaver,读取文件基于 H5的 FileReader。

更新:2020-11-2 创建:2018-12-29

文档

环境提示:预览环境需要部署在服务器下,不然无法异步获取需要导出的数据
现有Excel操作前端库中,XLSX.JS功能强大但是操作颇为不便,于是封装了此插件,依赖jQuery,支持Layui插件形式加载,导出仅需一句话。
导出excel功能基于 XLSX.js,下载功能基于 FileSaver,读取文件基于 H5的 FileReader。。
!!!!!!!!!!!!!!!重要!!!!!!!!!!!!!!!!!!!
最新的代码和文档均在GITHUB以及码云,社区更新可能不及时可能会碰上一些修复过的BUG
2020-11-02: 社区上传附件已无法使用导致无法更新插件,请使用GitHub或码云获取最新稳定版本
Github: https://github.com/wangerzi/layui-excel
码云(国内下载较快): https://gitee.com/wangerzi/layui-excel
演示及文档
在线演示:
http://excel.wj2015.com
在线文档(请以此文档为准,layui插件中文档维护不及时):
http://excel.wj2015.com/_book
作者博客:
https://blog.wj2015.com

浏览器兼容性
导出支持 IE10+、Firefox、Chrome 等主流浏览器
导入仅支持 Edge、Firefox、Chrome 等新型浏览器
非layui或非模块化支持
引入jQuery和插件源代码,通过全局变量 LAY_EXCEL 调用函数,具体可见demo: http://excel.wj2015.com/demos/noLayui/index.html
功能预览:
花式设置样式:

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

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

导入数据:

加群交流:
QQ群号:555056599

期望收集

提醒:这里的函数列表比较老,请至 http://excel.wj2015.com/_book 查看 !!!
提醒:这里的函数列表比较老,请至 http://excel.wj2015.com/_book 查看 !!!
提醒:这里的函数列表比较老,请至 http://excel.wj2015.com/_book 查看 !!!
函数列表


重要函数参数配置



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 最初版本

下载

立即下载 去码云下载 去 GitHub 下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。