如何在Excel文件下载过程中显示Kendo进度加载器并完成后隐藏？

excelExport事件之所以达不到需求，是因为它只会在导出数据已准备完毕、即将触发浏览器下载时触发，完全覆盖不了数据加载/导出准备的过程。要实现加载过程中显示进度器，得从触发导出的入口入手，手动控制加载器的显示和隐藏：

具体实现步骤 #

1. 初始化Kendo进度加载器，绑定到目标容器（Grid本身或页面全局）
2. 拦截Grid默认的Excel导出按钮点击事件，阻止默认行为
3. 手动触发导出操作，通过Promise回调在导出完成/失败时隐藏加载器

代码示例 #

HTML结构

<div id="grid"></div>
<!-- 用于承载加载器的容器 -->
<div id="loadingOverlay"></div>

JavaScript实现

// 初始化进度加载器（可自定义样式、位置）
const loadingOverlay = $("#loadingOverlay").kendoOverlay({
    loaders: [{
        name: "pulsing", // 可选加载动画样式：pulsing、converging、double-ring等
        color: "#0071bc" // 匹配Kendo主题色，可自行修改
    }],
    visible: false // 默认隐藏
}).data("kendoOverlay");

// 初始化Grid
$("#grid").kendoGrid({
    dataSource: {
        // 替换为你的数据源配置
        data: [
            { id: 1, name: "张三", age: 28 },
            { id: 2, name: "李四", age: 32 }
        ],
        pageSize: 10
    },
    toolbar: ["excel"], // 显示Excel导出按钮
    excel: {
        fileName: "Grid数据导出.xlsx",
        filterable: true // 导出包含筛选状态的数据
    },
    columns: [
        { field: "id", title: "ID" },
        { field: "name", title: "姓名" },
        { field: "age", title: "年龄" }
    ]
});

// 获取Grid实例和导出按钮
const grid = $("#grid").data("kendoGrid");
const excelExportBtn = grid.element.find(".k-grid-excel");

// 拦截导出按钮点击事件
excelExportBtn.on("click", function(e) {
    e.preventDefault(); // 阻止默认导出流程
    
    // 显示加载器
    loadingOverlay.show();
    
    // 手动触发导出，通过Promise回调控制加载器隐藏
    grid.saveAsExcel()
        .done(function() {
            // 导出完成（浏览器开始下载文件）时隐藏加载器
            // 加短延迟避免加载器闪一下就消失
            setTimeout(() => {
                loadingOverlay.hide();
            }, 600);
        })
        .fail(function() {
            // 导出失败时也要隐藏加载器，并提示用户
            loadingOverlay.hide();
            alert("导出失败，请检查数据后重试");
        });
});

补充说明 #

• 若你的Grid使用服务器端分页/大数据量导出，数据获取过程可能较长，上述逻辑依然适用，因为saveAsExcel()会自动处理数据的获取与导出准备
• 可将加载器容器嵌套在Grid容器内，这样加载动画只会覆盖Grid区域，不会影响页面其他部分
• 加载器的动画样式、颜色可根据Kendo Overlay的配置自定义调整

内容的提问来源于stack exchange，提问作者Rolando