如何判断Blazor Server中<a>标签的文件下载完成？

针对你遇到的Blazor Server下载大文件后无法判断完成时机删除临时文件的问题，这里提供几种可行的解决方案：

方法一：使用Fetch API监听下载完成，通知后端删除文件 #

原有的<a>标签点击无法监听下载完成事件，改用Fetch API获取文件流，在下载完成后通过JS互操作通知Blazor后端删除临时文件。

修改后的JavaScript代码 #

async function triggerFileDownload(fileName, urlFilePath) {
    try {
        // 用Fetch获取文件流，监听下载完成
        const response = await fetch(urlFilePath);
        if (!response.ok) throw new Error('请求文件失败');
        
        const blob = await response.blob();
        const objectUrl = window.URL.createObjectURL(blob);
        
        // 创建下载链接
        const anchorElement = document.createElement('a');
        anchorElement.href = objectUrl;
        anchorElement.download = fileName ?? '';
        document.body.appendChild(anchorElement);
        anchorElement.click();
        
        // 清理资源
        window.URL.revokeObjectURL(objectUrl);
        document.body.removeChild(anchorElement);
        
        // 通知Blazor下载完成，触发文件删除
        await DotNet.invokeMethodAsync('你的程序集名称', 'OnFileDownloadCompleted', urlFilePath);
    } catch (error) {
        console.error('下载出错:', error);
        // 可选：下载失败时也删除临时文件
        await DotNet.invokeMethodAsync('你的程序集名称', 'OnFileDownloadFailed', urlFilePath);
    }
}

Blazor组件中的C#代码 #

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

@code {
    private IJSObjectReference? _jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./wwwroot/js/download-utils.js"); // 替换为你的JS文件路径
        }
    }

    // 触发下载的方法
    public async Task StartDownload(string fileName, string tempFilePath)
    {
        if (_jsModule != null)
        {
            await _jsModule.InvokeVoidAsync("triggerFileDownload", fileName, tempFilePath);
        }
    }

    // 供JS调用的下载完成回调
    [JSInvokable]
    public async Task OnFileDownloadCompleted(string tempFilePath)
    {
        if (File.Exists(tempFilePath))
        {
            File.Delete(tempFilePath);
        }
    }

    // 供JS调用的下载失败回调
    [JSInvokable]
    public async Task OnFileDownloadFailed(string tempFilePath)
    {
        if (File.Exists(tempFilePath))
        {
            File.Delete(tempFilePath);
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_jsModule != null)
        {
            await _jsModule.DisposeAsync();
        }
    }
}

方法二：后台定时清理兜底（必加） #

前端通知可能因用户关闭页面、网络中断等情况失败，因此需要后台定时任务定期清理过期的临时文件，避免服务器磁盘被占满。

实现后台清理服务 #

public class TempFileCleanupService : BackgroundService
{
    private readonly IWebHostEnvironment _webHostEnv;
    // 每1小时清理一次
    private readonly TimeSpan _cleanupInterval = TimeSpan.FromHours(1);
    // 删除创建超过1小时的临时文件
    private readonly TimeSpan _fileExpiry = TimeSpan.FromHours(1);

    public TempFileCleanupService(IWebHostEnvironment webHostEnv)
    {
        _webHostEnv = webHostEnv;
    }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        while (!stoppingToken.IsCancellationRequested)
        {
            CleanExpiredTempFiles();
            await Task.Delay(_cleanupInterval, stoppingToken);
        }
    }

    private void CleanExpiredTempFiles()
    {
        string tempDir = Path.Combine(_webHostEnv.ContentRootPath, "TempDownloadFiles"); // 你的临时文件目录
        if (!Directory.Exists(tempDir)) return;

        foreach (var filePath in Directory.GetFiles(tempDir))
        {
            var fileInfo = new FileInfo(filePath);
            if (DateTime.Now - fileInfo.CreationTime > _fileExpiry)
            {
                try
                {
                    File.Delete(filePath);
                }
                catch (IOException)
                {
                    // 文件可能正在被下载，跳过下次再删
                }
                catch (Exception ex)
                {
                    // 记录日志
                    Console.WriteLine($"清理临时文件失败: {ex.Message}");
                }
            }
        }
    }
}

在Program.cs中注册服务 #

builder.Services.AddHostedService<TempFileCleanupService>();

方法三：直接返回文件流（避免临时文件） #

如果业务允许，可直接在后端生成文件流并返回给前端，无需先创建临时文件，从根源上解决删除问题。

示例API控制器代码 #

[ApiController]
[Route("api/download")]
public class FileDownloadController : ControllerBase
{
    [HttpGet("large-file")]
    public IActionResult DownloadLargeFile()
    {
        // 这里替换为你的大文件生成逻辑，直接返回流
        var filePath = "你的源文件路径";
        if (!File.Exists(filePath)) return NotFound();

        var stream = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.Read, 4096, useAsync: true);
        return new FileStreamResult(stream, "application/octet-stream")
        {
            FileDownloadName = "large-file.zip"
        };
    }
}

Blazor中调用API下载 #

function downloadFromApi() {
    window.open('/api/download/large-file', '_blank');
}

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