Blazor WebAssembly项目中实现文件准备下载阶段的等待提示

完全可以实现你的需求！核心思路是用fetch API替代传统的表单提交，这样既能发送带参数的POST请求，还能监听响应开始返回的时刻——也就是文件准备完成、开始流式传输的节点，刚好对应你说的Chrome从转圈切换到下载进度的时机。这种方式不会把整个文件加载到客户端内存，完全符合你的要求。

步骤1：修改JavaScript下载函数 #

替换原来的downloadFromPost函数，改成下面的版本：

async function downloadFromPost(options) {
    // 1. 显示加载提示
    const loadingElement = document.getElementById('loading-indicator');
    if (loadingElement) {
        loadingElement.style.display = 'block';
    }

    try {
        // 2. 构建请求参数，和原表单逻辑一致
        const formData = new FormData();
        const token = window.localStorage.getItem("authToken");
        if (token) {
            formData.append("jwt", token);
        }
        // 加入所有业务参数
        const targetUrl = options.url;
        delete options.url;
        for (const property in options) {
            formData.append(property, options[property]);
        }

        // 3. 发送POST请求，等待响应开始返回（文件准备完成）
        const response = await fetch(targetUrl, {
            method: 'POST',
            body: formData
        });

        if (!response.ok) {
            throw new Error(`请求失败: ${response.status}`);
        }

        // 4. 文件开始传输，隐藏加载提示
        if (loadingElement) {
            loadingElement.style.display = 'none';
        }

        // 5. 触发浏览器原生下载流程
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        // 从API响应头自动获取文件名（如果API支持的话）
        const contentDisposition = response.headers.get('Content-Disposition');
        if (contentDisposition) {
            const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
            if (filenameMatch && filenameMatch[1]) {
                a.download = filenameMatch[1].replace(/['"]/g, '');
            }
        }
        document.body.appendChild(a);
        a.click();
        // 清理临时资源
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    } catch (error) {
        // 请求出错时也要隐藏提示，避免一直显示
        if (loadingElement) {
            loadingElement.style.display = 'none';
        }
        console.error('下载出错:', error);
        alert('下载失败，请稍后重试');
    }
}

步骤2：在Blazor页面添加加载提示元素 #

在你的Blazor页面里，把加载提示放在按钮附近就行：

<button type="button" @onclick="Download">Download</button>
<div id="loading-indicator" style="display: none; margin-top: 8px; color: #666;">wait...</div>

@code {
    [Inject] IJSRuntime JSRuntime { get; set; }
    private string param1 = "your-first-param";
    private string param2 = "your-second-param";

    private async Task Download() {
        await JSRuntime.InvokeVoidAsync("downloadFromPost", new { 
            url = "api/mycontroller/download", 
            param1, 
            param2 
        });
    }
}

为什么这个方案适合你？ #

• 不占客户端内存：fetch结合blob()是流式处理响应的，浏览器会直接处理文件流，不会把整个文件塞进内存，和原生表单下载的内存表现一致。
• 精准匹配状态：发送请求后立刻显示"wait..."，直到API准备好文件、开始返回响应时隐藏提示，完美对应Chrome从转圈到显示下载进度的节点。
• 兼容原有API逻辑：参数传递方式和原表单提交完全一致，不用修改后端API的参数接收代码。

额外小优化（可选） #

如果你的API还没设置文件名返回，建议在后端添加Content-Disposition响应头，比如ASP.NET Core中可以这样写：

// 假设你返回的是CSV文件
return File(fileStream, "text/csv", "exported-data.csv");

这样前端就能自动获取到正确的文件名，不用手动指定下载的文件名啦。

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