Blazor Server 无需单独下载页实现文件下载的方案咨询

方案1：单页内全流程实现（完全无需额外服务端文件） #

通过Blazor JS互操作直接触发浏览器下载，不需要创建单独下载页，也不需要把文件写入wwwroot也可运行，逻辑全部集成在你的OtherPage.razor内：

• 第一步：在OtherPage.razor顶部注入依赖

@inject IJSRuntime JS
@inject IWebHostEnvironment _env

• 第二步：替换原有两个按钮为单个触发按钮

<button class="form-control btn btn-primary" @onclick="GenerateAndDownloadFile">生成并下载文件</button>

• 第三步：添加C#处理逻辑

private async Task GenerateAndDownloadFile()
{
    // 你的文件生成逻辑，可按需修改内容
    var filePath = Path.Combine(_env.WebRootPath, "myFile.txt");
    var fileContent = System.Text.Encoding.UTF8.GetBytes("你要写入的文件内容");
    await File.WriteAllBytesAsync(filePath, fileContent);

    // 转换为base64传给前端触发下载
    var fileBase64 = Convert.ToBase64String(fileContent);
    await JS.InvokeVoidAsync("triggerFileDownload", "myFile.txt", fileBase64);
}

• 第四步：在Blazor全局页面（Pages/_Layout.cshtml 或 wwwroot/index.html）的<script>块中添加下载触发函数

function triggerFileDownload(fileName, base64Content) {
    const downloadLink = document.createElement('a');
    downloadLink.href = `data:application/octet-stream;base64,${base64Content}`;
    downloadLink.download = fileName;
    downloadLink.click();
    downloadLink.remove();
}

该方案适合小文件下载场景，点击一次即可完成文件生成+下载全流程，无额外页面跳转，也不需要暴露独立下载入口

方案2：极简服务端端点替代单独下载页 #

如果你的文件体积较大，不适合用base64传输，也不用创建两个Razor Page文件，只需要在Program.cs中添加一行最小API端点即可：

// 放在app.Run()之前
app.MapGet("/api/downloadMyFile", async (IWebHostEnvironment env) =>
{
    var filePath = Path.Combine(env.WebRootPath, "myFile.txt");
    if (!File.Exists(filePath)) return Results.NotFound();
    return Results.File(await File.ReadAllBytesAsync(filePath), "application/octet-stream", "myFile.txt");
});

之后在OtherPage.razor的文件生成完成后，直接调用JS访问该端点即可触发下载：

private async Task CreateAndDownload()
{
    // 原有文件生成逻辑
    using (var fs = System.IO.File.Create(Path.Combine(_env.WebRootPath, "myFile.txt")))
    {
        // 写入文件内容
    }
    // 触发下载
    await JS.InvokeVoidAsync("open", "/api/downloadMyFile", "_blank");
}

该方案仅需要添加一行端点配置，比创建独立Razor Page下载页简洁很多，也适合大文件下载场景

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