导读:本期聚焦于小伙伴创作的《C# Blazor Server和WASM模式下如何从流生成并下载文件》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《C# Blazor Server和WASM模式下如何从流生成并下载文件》有用,将其分享出去将是对创作者最好的鼓励。

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

C# Blazor Server和WASM模式下如何从流生成并下载文件

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.JSInteropSystem.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

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。