如何在Blazor服务端将内存对象作为JSON文件下载到客户端

1. 引入全局JS方法 #

根据你使用的Blazor模式，选择对应的入口文件添加JS代码：

• Blazor Server：找到Pages/_Host.cshtml（.NET 6/7）或App.razor底部的脚本引入区域（.NET 8+）
• Blazor WASM：找到wwwroot/index.html

在</body>闭合标签之前插入如下saveAsFile实现代码：

function saveAsFile(filename, base64Data) {
    // 把base64转成Blob对象
    const byteCharacters = atob(base64Data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], { type: 'application/json' });

    // 创建下载链接触发下载
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
    // 释放资源
    URL.revokeObjectURL(link.href);
}

2. 修正Razor页面代码 #

首先修正两处核心错误：原代码按钮事件写法错误（Blazor绑定事件需要用@onclick）、类名实例化错误（你定义的是MyClass，原代码错误实例化了SpeciesData），同时需要注入IJSRuntime，完整参考代码如下：

@* 注入JSRuntime，必须项 *@
@inject IJSRuntime JS
@* 如果是.NET 8+ Blazor Web App 还要加下面这句开启交互模式 *@
@* @rendermode InteractiveServer *@

<button type="button" class="ml-auto p-2 btn btn-primary" @onclick="DownloadFile">Download</button>

@code {
    async Task DownloadFile()
    {
        var testObj = new MyClass();
        testObj.Count = 100;
        testObj.Summary = "Lorem Ipsum";

        var fileName = "testing.json";

        var serializedObject = JsonSerializer.Serialize(testObj);
        byte[] bytes = System.Text.Encoding.UTF8.GetBytes(serializedObject);

        await JS.InvokeAsync<object>(
            "saveAsFile",
            fileName,
            Convert.ToBase64String(bytes));
    }

    public class MyClass
    {
        public int Count { get; set; }
        public string Summary { get; set; }
    }
}

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