无回发场景下服务器执行完成后如何将等待光标恢复为指针

我有一个ASP.NET网站，用户点击ImageButton后会触发服务器端代码生成并下载Excel文件，这个过程大概需要20秒。我已经实现了点击时将光标切换为等待模式，但不知道下载完成后如何把光标恢复成正常状态。

另外，我想知道能不能通过检查HttpContext来判断服务器端的生成下载过程是否完成？以下是服务器端负责生成下载文件的代码片段：

//*****************************************
//* Workbook Download & Cleanup
//*****************************************
using (var stream = new MemoryStream())
{
    Response.Clear();
    wb.Write(stream);
    Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    Response.AddHeader("Content-Disposition", string.Format("attachment;filename={0}", "Student Experiences.xlsx"));
    Response.BinaryWrite(stream.ToArray());
    Response.Flush();
    Response.End();
    HttpContext.Current.ApplicationInstance.CompleteRequest();
}

1. 为什么不能通过HttpContext恢复光标？ #

服务器端的HttpContext只能感知自身的请求处理状态，但无法主动通知前端下载完成——因为浏览器处理下载是独立于页面DOM的，服务器响应结束后，页面不会触发任何默认事件来告知下载完成，所以靠服务器端HttpContext没法直接实现光标恢复。

2. 可靠的前端+后端配合方案 #

推荐用AJAX预请求+触发下载的方式，这样能精准跟踪服务器端的处理状态，完成后再恢复光标：

步骤1：修改前端逻辑（替换原ImageButton的直接回发）

// 绑定ImageButton点击事件
document.getElementById('<%= ImageButton1.ClientID %>').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认回发行为

    // 切换为等待光标
    document.body.style.cursor = 'wait';

    // 用AJAX请求服务器生成Excel，传递所需参数
    fetch('/GenerateExcel.ashx', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'param=yourRequiredParams' // 替换为实际需要传递的参数
    })
    .then(response => response.text())
    .then(fileToken => {
        // 服务器生成完成，创建下载链接触发下载
        const downloadLink = document.createElement('a');
        downloadLink.href = '/DownloadExcel.ashx?token=' + fileToken;
        downloadLink.download = 'Student Experiences.xlsx';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);

        // 恢复正常光标
        document.body.style.cursor = 'default';
    })
    .catch(error => {
        // 出错时也恢复光标并提示
        document.body.style.cursor = 'default';
        alert('Excel生成失败：' + error);
    });
});

步骤2：拆分后端接口，分离生成与下载逻辑

• 生成接口（GenerateExcel.ashx）：负责生成Excel并保存到服务器临时目录，返回唯一文件标识：

public class GenerateExcel : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        // 这里写原代码中生成Workbook的逻辑
        var wb = new YourWorkbookInstance(); // 替换为你的Workbook实例
        var fileToken = Guid.NewGuid().ToString();
        var tempFilePath = Path.Combine(context.Server.MapPath("~/TempFiles"), $"{fileToken}.xlsx");

        // 将Workbook写入临时文件
        using (var stream = new FileStream(tempFilePath, FileMode.Create))
        {
            wb.Write(stream);
        }

        // 返回临时文件标识
        context.Response.ContentType = "text/plain";
        context.Response.Write(fileToken);
    }

    public bool IsReusable => false;
}

• 下载接口（DownloadExcel.ashx）：根据标识读取临时文件并返回给客户端，同时清理临时文件：

public class DownloadExcel : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var fileToken = context.Request.QueryString["token"];
        if (string.IsNullOrEmpty(fileToken))
        {
            context.Response.StatusCode = 400;
            return;
        }

        var tempFilePath = Path.Combine(context.Server.MapPath("~/TempFiles"), $"{fileToken}.xlsx");
        if (!File.Exists(tempFilePath))
        {
            context.Response.StatusCode = 404;
            return;
        }

        // 返回下载文件
        context.Response.Clear();
        context.Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        context.Response.AddHeader("Content-Disposition", "attachment;filename=Student Experiences.xlsx");
        context.Response.WriteFile(tempFilePath);
        context.Response.Flush();
        context.Response.End();

        // 异步删除临时文件，避免占用服务器空间
        Task.Run(() => {
            try { File.Delete(tempFilePath); } catch {}
        });
    }

    public bool IsReusable => false;
}

3. 简化应急方案（无需拆分接口） #

如果不想修改后端结构，可以用定时器+鼠标移动监听的折中方案，可靠性稍差但实现简单：

document.getElementById('<%= ImageButton1.ClientID %>').addEventListener('click', function() {
    document.body.style.cursor = 'wait';
    
    // 设置超时恢复，时长比实际处理时间稍长
    setTimeout(() => {
        document.body.style.cursor = 'default';
    }, 30000);

    // 监听鼠标移动，下载开始后用户移动鼠标就恢复光标
    document.addEventListener('mousemove', function restoreCursor() {
        document.body.style.cursor = 'default';
        document.removeEventListener('mousemove', restoreCursor);
    });
});

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