excel下载

layui table 用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

Spring Boot 整合template 结合layui能很好的实现一些需求

下面介绍一下layui和excel的下载功能

layui的简单使用

form表单相关的部分就不做介绍了，可以查看layui官方文档

创建表格标签

---

<table id="event_table" lay-filter="event_table" class="layui-hide"></table>

引入js文件

<!--  三方功能js引入-->
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/layui/exts/excel.js}"></script>
<!--  项目js引入-->
<script type="text/javascript" th:src="@{/js/event.js}"></script>

项目js

layui.use(['element', 'form', 'laydate','laypage','table'], function(){
    var layer = layui.layer //获得layer模块
        ,laypage = layui.laypage //获得laypage模块
        ,laydate = layui.laydate //获得laydate模块
        ,form = layui.form
        ,element = layui.element
        ,table = layui.table;

    //laydate实例使用
    laydate.render({
        elem: '#startTime' //指定元素
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#endTime' //指定元素
        ,type: 'datetime'
    });

    //form使用模块
    var gameId = '',count='',channelId='';
    form.on('select(gameId)', function(data){
        gameId = data.value;
        console.log(gameId);
    });
    form.on('select(channelId)', function(data){
        channelId = data.value;
        console.log(channelId);
    });

    //监听提交
    form.on('submit(formDemo)', function(data){
        if(gameId==''||gameId==null){
            layer.msg("游戏种类必填",{icon: 5});//失败的表情
            return false;
        }
        var userId = $("#userId").val();
        var channelUid = $("#channelUid").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        var param = {'gameId':gameId,'channelId':channelId,'userId':userId,'startTime':startTime,'endTime':endTime,'channelUid':channelUid}
        table.reload('event_table', {
            page: {//page参数是指重新刷新后从第几页开始
                curr: 1 //重新从第 1 页开始
            }
            , where: param
        });
        return false;
    });
    
    //第一个实例
    table.render({
        elem: '#event_table'
        ,height: 500
        ,url: '/oversea/template/select/event' //数据接口
        ,toolbar: true
        ,page: true //开启分页
        ,cols: [[
            {field: 'gameId', title: '游戏id',sort: true},
            {field: 'channelId', title: '渠道id',  sort: true },
            {field: 'serverId', title: '区服id'},
            {field: 'userId', title: '用户ID',templet: function(d){return d.userId+"\t"}},
            {field: 'roleId', title: '角色id'},
            {field: 'channelUid', title: '平台id'},
            {field: 'eventId', title: '事件id', sort: true},
            {field: 'createTime', title: '事件时间', sort: true}
        ]],
        done: function(res, curr, count){
            pageCurr=curr;
        }

    });
});

function downloadBtn() {
						
	layui.use([ 'layer'], function(){
		var layer = layui.layer //获得layer模块
        
	    var gameId = $("#gameId").val();
	    if(gameId==''||gameId==null){
            layer.msg("游戏种类必填",{icon: 5});//失败的表情
            return false;
        }
        var channelId = $("#channelId").val();
	    if(channelId==''||channelId==null){
            layer.msg("渠道种类必填",{icon: 5});//失败的表情
            return false;
        }
        var userId = $("#userId").val();
        var channelUid = $("#channelUid").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        var param = {'gameId':gameId,'channelId':channelId,'userId':userId,'startTime':startTime,'endTime':endTime,'channelUid':channelUid}
        $.ajax({
            type: "get",
            url: "/oversea/template/download/event",
            data: param,
            success(res) {
				        //将字符串，转换为json对象
				        var data = JSON.parse(res).data;
                //过滤，切换数据顺序
                data = LAY_EXCEL.filterExportData(
                    data,
                    ['gameId','channelId','serverId','userId','roleId','channelUid', 'eventId','createTime'])
                //设置表头
                data.unshift(
                    {
                        gameId:'gameId',
                        channelId:'channelId',
                        serverId:'serverId',
                        userId:'userId',
                        roleId:'roleId',
                        channelUid:'channelUid',
                        eventId:'eventId',
                        createTime:'createTime'
                    })
				//下载数据
                LAY_EXCEL.exportExcel({sheet1:data}, '表格导出.xlsx', 'xlsx')
            }
        })
	}) 
}

特别说明

直接参考官方文档也可

{field: 'userId', title: '用户ID',templet: function(d){return d.userId+"\t"}},

• 这一行是为了，在使用layui自带的excel下载功能时，出现科学计数法的处理templet: function(d){return d.userId+"\t"

• toolbar: true:配置以后会开启表格头部工具栏区域，可以支持下载功能

使用自带的excel下载功能存在部分局限，无法下载全部数据(需要调整分页显示情况)，所以使用三方的excel下载功能

excel下载

这个是通过第三方自己分装的插件，简化了到处流程 excel插件下载

使用项目的几种方式

npm安装

---

$ npm i lay-excel

然后使用 import 引入并调用导出函数

import LAY_EXCEL from 'lay-excel';
LAY_EXCEL.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx')

script引入

<script src="layui_exts/excel.js"></script>
<script>
    LAY_EXCEL.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx')
</script>

Layui插件引入

---

layui.config({
	base: 'layui_exts/', // 配置一个可访问地址
}).extend({
    excel: 'excel',
});
layui.use(['excel'], function (){
    layui.excel.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx')
})

• 本文作者： 景兴春
• 本文链接： https://www.jingxc.top/front/layui-excel.html
• 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！