在C# Blazor应用开发中,从流生成并下载文件是常见需求,比如动态生成Excel报表、导出PDF文档、生成临时文本文件等场景都需要用到该功能。Blazor目前主要有Server和WebAssembly两种托管模式,两者的运行环境不同,文件下载的实现方式也有明显区别,需要分别处理。

Blazor Server模式下的实现方式
Blazor Server模式下,应用运行在服务端,和客户端通过SignalR连接通信,因此可以利用服务端的文件操作能力,结合JS互操作实现文件下载。核心思路是先把流内容转换为字节数组,再通过注入的IJSRuntime调用前端JS方法触发下载。
实现步骤
- 生成目标文件流,比如内存流、文件流等
- 将流转换为字节数组
- 调用JS方法创建Blob对象并触发下载
代码示例
首先定义下载用的JS方法,在_Host.cshtml(Server模式)的<head>中添加如下脚本:
function downloadFileFromStream(fileName, content) {
const blob = new Blob([content], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(url);
}
然后在Razor组件的代码部分实现流生成和调用逻辑:
@page "/download-server"
@using System.IO
@using System.Text
@inject IJSRuntime JSRuntime
<h3>Blazor Server 文件下载</h3>
<button @onclick="GenerateAndDownloadFile">生成并下载文件</button>
@code {
private async Task GenerateAndDownloadFile()
{
// 1. 生成示例流,这里模拟生成一段文本的内存流
string fileContent = "这是Blazor Server模式生成的测试文件内容n当前时间:" + DateTime.Now;
byte[] fileBytes = Encoding.UTF8.GetBytes(fileContent);
using MemoryStream stream = new MemoryStream(fileBytes);
// 2. 将流转换为字节数组
byte[] streamBytes = stream.ToArray();
// 3. 调用JS方法下载文件
await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "server_test.txt", streamBytes);
}
}
Blazor WASM模式下的实现方式
Blazor WASM模式下,应用运行在浏览器端的WebAssembly环境中,没有服务端的直接文件操作能力,但可以直接操作浏览器的API,实现文件下载的逻辑更简洁,不需要依赖额外的JS方法,直接通过C#调用浏览器API即可完成。
实现步骤
- 生成目标文件流
- 将流转换为字节数组
- 使用浏览器的File API创建Blob并触发下载
代码示例
首先需要在项目中引用Microsoft.JSInterop和System.Text.Json等相关包,WASM模式下可以直接使用IJSRuntime调用浏览器API,也可以直接使用内置的下载能力,下面是直接通过JS互操作实现的示例:
先在wwwroot/index.html中添加和Server模式相同的downloadFileFromStreamJS方法,然后编写Razor组件代码:
@page "/download-wasm"
@using System.IO
@using System.Text
@inject IJSRuntime JSRuntime
<h3>Blazor WASM 文件下载</h3>
<button @onclick="GenerateAndDownloadFile">生成并下载文件</button>
@code {
private async Task GenerateAndDownloadFile()
{
// 1. 生成示例流,这里模拟生成CSV格式的内存流
StringBuilder csvContent = new StringBuilder();
csvContent.AppendLine("姓名,年龄,城市");
csvContent.AppendLine("张三,25,北京");
csvContent.AppendLine("李四,30,上海");
byte[] fileBytes = Encoding.UTF8.GetBytes(csvContent.ToString());
using MemoryStream stream = new MemoryStream(fileBytes);
// 2. 将流转换为字节数组
byte[] streamBytes = stream.ToArray();
// 3. 调用JS方法下载文件
await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "wasm_test.csv", streamBytes);
}
}
两种模式的注意事项
- Blazor Server模式下如果流数据过大,需要注意SignalR传输的大小限制,避免超过默认的消息大小导致传输失败,可以通过配置SignalR的选项调整最大消息大小。
- Blazor WASM模式下所有操作都在浏览器端完成,大文件生成和下载会占用客户端内存,需要根据实际情况控制文件大小。
- 生成的文件流如果是非文本类型,比如Excel、PDF等,需要正确设置Blob的MIME类型,比如Excel可以设置为
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet。
常见问题解答
问:如果流是从数据库或者远程接口获取的怎么处理?
只需要把生成内存流的部分替换为从数据库或接口读取流的逻辑即可,比如使用HttpClient获取远程流,或者从数据库读取二进制字段转换为流,后续转换为字节数组和下载的逻辑不变。
问:能不能不用JS互操作实现下载?
Blazor WASM模式下可以通过NavigationManager配合数据URI的方式实现,但只适合小文件,大文件还是推荐使用JS互操作的方式。Blazor Server模式下必须依赖JS互操作,因为服务端无法直接操作客户端的文件下载。
BlazorBlazor_ServerBlazor_WASMC#文件下载流文件生成修改时间:2026-07-23 14:27:17