layui导出excel表格文件

沟通交流群:
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');
        }
    });
});

猜你喜欢

转载自blog.csdn.net/JiaZhaoMeng/article/details/88964931