layui 导出 excel 表格

前言

最近这个项目中，涉及到了导出excel表格这个功能，这个后台管理使用的是layui这个框架，大体来说还是很方便，节省了很多的开发时间。

看layui的官网社区论坛，很多人都说layui自带的导出功能，只能导出当前页面的数据。而且，部分的数据都是通过数据之间关联表查询出来的，用layui自带的导出数据会显示（Object），让人很头疼。

所以要用到插件，很简单，下面的网址，把文件下载。

 

这个是插件必须用到的文件，注意引入文件的路径。

在这里给大家提供一个网址，可以来这下载，里面也有教程：https://github.com/wangerzi/layui-excel

 

给大家看下项目后台： 就比如订单号，就是从关联的订单表中查询的

 

直接上代码：

 

jsp：

   这是一个导出的操作按钮：

<button type="button" lay-submit="" class="layui-btn layui-btn-warm" lay-filter="uploadImg">
    <i class="layui-icon"></i>导出Excel</button>

layui.use(['layer', 'form', 'table', 'laydate','jquery'], function () {
    var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form,
        laydate = layui.laydate,
        table = layui.table;

 
    // 加载框
    var loading;

    loading = layer.load(1, {shade: [0.3, '#fff']});

    form.on('submit(uploadImg)', function(data){
        loading = layer.load(1, {shade: [0.3, '#fff']});
        var $ = layui.jquery;
        var excel = layui.excel;
        $.ajax({
            url: '${WEB_URL}sellDeal/getTreeList',
            dataType: 'json',
            data: {
                datas:JSON.stringify(data.field)
            },
            success: function(res) {
                layer.close(loading);
                layer.msg(res.msg);
                // 假如返回的 res.data 是需要导出的列表数据
                console.log(res.data);//
                // 1. 数组头部新增表头
                res.data.unshift({sdId: 'ID',sdMoney: '交易金额',sdTime:'交易时间',type:'交易类型',sdWater:'交易流水编号',order:'订单号'});
                // 3. 执行导出函数，系统会弹出弹框
                excel.exportExcel({
                    sheet1: res.data
                }, '平台流水.xlsx', 'xlsx');
            },
            error:function(res){
                layer.close(loading);
                layer.msg(res.msg);
            }
        });
    });
});