沟通交流群:
QQ群号: 555056599
github地址:
https://github.com/wangerzi/layui-excel
功能演示地址:
http://excel.wj2015.com
注:不能直接在IFRAME里边直接调用导出方法,因为浏览器会限制这种导出行为,如有遇到此类情况,可使用 parent.layui.excel.exportExcel() 的方式调用父级页面函数以避免这个问题(父页面需要先加载插件)
快速上手
由于插件规模扩大和功能的增加,导致插件上手难度有一定的增加。但如果只使用核心功能,其实没有必要去研究插件的所有方法,故在此把此插件解决核心需求的方法展示出来。
第一步:从后台获取需要导出的数据
一般的导出场景是后端给出获取数据的接口,前端请求后端接口后,根据接口返回参数导出,所以需要 $.ajax() 异步请求接口数据
$.ajax({
url: '/path/to/get/data',
dataType: 'json',
success: function(res) {
// 假如返回的 res.data 是需要导出的列表数据
console.log(res.data);// [{name: 'wang', age: 18}, {name: 'layui', age: 3}]
}
});
第二步:下载源码并引入插件
如果使用 layuiadmin,则只需要将插件(layui_exts/excel.js)放到 controller/下,然后 layui.use 即可,或者可以放在 lib/extend 中,只不过需要改 config.js
非 layuiadmin 初始化如下:
layui.config({
base: 'layui_exts/',
}).extend({
excel: 'excel',
});
第三步:手工添加一个表头,并调用导出excel的内部函数
layui.use(['jquery', 'excel', 'layer'], function() {
var $ = layui.jquery;
var excel = layui.excel;
var layer = layui.layer;
$.ajax({
url: '/path/to/get/data',
dataType: 'json',
success: function(res) {
// 假如返回的 res.data 是需要导出的列表数据
console.log(res.data);// [{name: 'wang', age: 18, sex: '男'}, {name: 'layui', age: 3, sex: '女'}]
// 1. 数组头部新增表头
res.data.unshift({name: '用户名',sex: '男', age: '年龄'});
// 2. 如果需要调整顺序,请执行梳理函数
var data = excel.filterExportData(res.data, {
name:'name',
sex: 'sex',
age:'age',
});
// 3. 执行导出函数,系统会弹出弹框
var timestart = Date.now();
layui.excel.exportExcel({
sheet1:data
}, '导出接口数据.xlsx', 'xlsx');
var timeend = Date.now();
var spent = (timeend - timestart) / 1000;
layer.alert('单纯导出耗时 '+spent+' s');
}
});
});
layui导出excel表格文件
猜你喜欢
转载自blog.csdn.net/JiaZhaoMeng/article/details/88964931
今日推荐
周排行