Blazor文件下载的几种实现方式

About 742 wordsAbout 2 min

2024-05-14

在 Blazor 应用程序中，实现文件下载功能是一个常见需求。本文将介绍几种不同的实现方式，并分析它们的优缺点。

1. 使用 JavaScript Interop

这是最简单的实现方式，但需要依赖 JavaScript。

public async Task DownloadFile()
{
    await using var memoryStream = new MemoryStream(_processedFile);
    var streamRef = new DotNetStreamReference(stream: memoryStream);
    
    await JS.InvokeVoidAsync("downloadFileFromStream", streamRef, newFileName);
}

需要在 JavaScript 中实现对应的方法：

window.downloadFileFromStream = async (streamRef, fileName) => {
    const arrayBuffer = await streamRef.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

2. 使用控制器（推荐方式）

这种方式完全不依赖 JavaScript，更加灵活和可控。

首先创建一个下载控制器：

[ApiController]
[Route("api/[controller]")]
public class DownloadController : ControllerBase
{
    private readonly ITempFileStorage _tempFileStorage;
    
    public DownloadController(ITempFileStorage tempFileStorage)
    {
        _tempFileStorage = tempFileStorage;
    }
    
    [HttpGet("{fileId}")]
    public async Task<IActionResult> Download(string fileId)
    {
        var (fileContent, fileName) = await _tempFileStorage.GetFileAsync(fileId);
        if (fileContent == null)
        {
            return NotFound();
        }
        
        return File(fileContent, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", fileName);
    }
}

在 Blazor 页面中使用：

<a href="@_downloadUrl" class="btn btn-primary" download="@_downloadFileName">
    <i class="fas fa-download"></i> 下载文件
</a>

@code {
    private string _downloadUrl = string.Empty;
    private string _downloadFileName = string.Empty;

    private async Task ProcessFile()
    {
        // 生成文件ID和下载URL
        var fileId = Guid.NewGuid().ToString("N");
        _downloadUrl = $"/api/download/{fileId}";
        _downloadFileName = "processed_file.xlsx";
        
        // 保存文件到临时存储
        await SaveToTempStorage(fileId, fileContent);
    }
}