Blazor Server应用下载文件后触发TaskCanceledException问题求助

问题根源 #

你用NavigationManager.NavigateTo触发文件下载的方式本身就不合适——这个方法是用来触发页面导航的，而浏览器处理文件下载时不会替换当前Blazor页面，导致Blazor的导航任务一直处于等待状态，超时后抛出TaskCanceledException，进而破坏Circuit的稳定性，最终引发应用崩溃。

可行解决方案 #

方案1：使用JSInterop触发文件下载（推荐） #

放弃NavigationManager.NavigateTo，改用JavaScript创建下载链接的方式触发文件下载，避免触发Blazor的导航流程。

1. 在wwwroot目录下创建或修改JavaScript文件（比如download.js），添加以下代码：

window.triggerFileDownload = function(url) {
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    // 如果控制器返回了Content-Disposition头，这里可以留空，浏览器会自动使用头中的文件名
    downloadLink.download = '';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

2. 在Blazor组件中注入IJSRuntime和NavigationManager，修改按钮点击逻辑：

@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager

<button @onclick="StartFileDownload">下载文件</button>

@code {
    private Guid RequestGuid = Guid.NewGuid();

    private async Task StartFileDownload()
    {
        // 生成绝对URL，确保跨环境正确访问
        var downloadUrl = NavigationManager.ToAbsoluteUri(
            $"api/DownloadFile?RequestGuid={WebUtility.UrlEncode(RequestGuid.ToString())}"
        ).ToString();
        
        // 调用JS方法触发下载
        await JSRuntime.InvokeVoidAsync("triggerFileDownload", downloadUrl);
    }
}

方案2：优化控制器返回头（配合方案1效果更好） #

确保你的控制器方法正确设置响应头，明确告知浏览器这是一个下载文件，避免浏览器误判为页面内容：

[HttpGet("api/DownloadFile")]
public IActionResult DownloadFile(Guid RequestGuid)
{
    // 你的Zip文件生成逻辑，获取文件流
    var zipStream = CreateInMemoryZip(RequestGuid);
    
    // 设置Content-Disposition头，指定文件名和下载类型
    return File(
        zipStream, 
        "application/zip", 
        $"archive_{RequestGuid}.zip"
    );
}

为什么这能解决问题 #

通过JS直接创建下载链接的方式，不会触发Blazor的导航生命周期，也就不会产生等待超时的任务，从根源上避免了TaskCanceledException的发生，同时保证Circuit的稳定运行。

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