基于layui框架实现导出table数据至excel

最新推荐文章于 2025-09-02 13:54:43 发布

原创最新推荐文章于 2025-09-02 13:54:43 发布 · 3.9k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html

java 同时被 2 个专栏收录

19 篇文章

订阅专栏

5 篇文章

订阅专栏

本文详细介绍如何使用layui框架结合自定义插件实现数据导出功能，包括前端按钮设置、导出条件筛选及数据格式调整等关键步骤，适用于需要根据查询条件导出全部数据的场景。

layui本身带有导出excel功能，直接用table的toolbar功能就会在table的工具栏有导出excel的图表(官方文档上有，这里就不再赘述)。不过由于layui自身的导出excel无法导出全部数据，且不能根据查询条件进行数据的导出.所以就引出了这篇文章，话不多说，上干货。

首先需要引入插件（下载地址：https://fly.layui.com/extend/excel/#download）

<script type="text/javascript" src="/static/layui_exts/excel.js"></script>

前端导出按钮

 <div class="layui-inline">
       <a style="background-color: green;" class="layui-btn layui-btn-normal export">导出</a>
 </div>

layui中启用excel模块

  var excel=layui.excel;

设定按钮点击事件

$(".export").on("click", function () {exportExcel();})

function exportExcel() {
        //根据查询条件,筛选导出数据
        $.get("/stockIn/excelData", {
            name: $(".name").val(),
            code: $(".code").val(),
            warehouseIds: $(".warehouseIds").val(),
            stockInTimeBegin: $("#stockInTime").val().split(" - ")[0],
            stockInTimeEnd: $("#stockInTime").val().split(" - ")[1],
        }, function (data) {
            if (data.data) {
                var exportData=data.data;
                //表头设置
                exportData.unshift({
                    productName: '物料名称',
                    quantity: '数量',
                    units:'单位',
                    inner: '入库人',
                    name: '仓库名称',
                    manufacturer: '厂商',
                    note: '备注',
                    createTime: '入库日期'
                });
                //文件名称
                var title='入库记录'+new Date().getTime()+'.xlsx';
                // 意思是：A列宽度120px，B列40px...,具体宽度根据字段值实际长度设定
                var colConf = excel.makeColConfig({
                    'A': 120,
                    'B': 40,
                    'C': 40,
                    'F': 140,
                    'G': 100,
                    'H': 140
                }, 80);

                excel.exportExcel({
                    sheet1: exportData
                }, title, 'xlsx', {
                    extend: {
                        '!cols': colConf
                    }
                });
            } else {
                layer.msg(data.msg);
            }
        })
    }

效果图