.NET 6 MVC 如何提交模型后触发浏览器下载对应JSON文件

我的模型存储在客户端JavaScript对象中，用户可通过UI控件编辑模型属性，需要实现下载功能，导出对应当前编辑状态的JSON文件，项目基于.NET 6 MVC框架开发。

已尝试的方案 #

后端接口实现 #

使用Newtonsoft.Json将模型序列化为JSON格式，接口代码如下：

public IActionResult Download([FromForm]SomeModel someModel)
{
    var json = JsonConvert.SerializeObject(someModel);
    var characters = json.ToCharArray();
    var bytes = new byte[characters.Length];
    for (var i = 0; i < characters.Length; i++)
    {
        bytes[i] = (byte)characters[i];
    }

    var stream = new MemoryStream();
    stream.Write(bytes);
    stream.Position = 0;
    return this.File(stream, "APPLICATION/octet-stream", "someFile.json");
}

前端调用代码 #

视图中添加下载按钮：

<button class="btn btn-primary" onclick="download()">Download</button>

按钮点击事件通过jQuery ajax实现：

function download() {
    $.ajax({
        url: 'https://hostname/ControllerName/Download',
        method: 'POST',
        data: { someModel: someModel },
        success: function (data) {
            console.log('downloading', data);
        },
    });
}

遇到的问题 #

浏览器控制台显示模型已成功POST提交到服务端，序列化生成的JSON内容也正常返回浏览器，但始终没有触发文件下载行为。

其他尝试：使用ActionLink调用接口 #

尝试通过Razor语法生成的链接调用后端下载接口：

@Html.ActionLink("Download", "Download", "ControllerName")

该方案的缺陷：
这种方式可以正常触发文件下载，但ActionLink只能发起无请求体的GET请求，无法将用户编辑后的最新模型数据传递到服务端，最终下载的是SomeModel默认实例序列化生成的JSON文件，不是用户编辑后的最新内容。

待解决问题 #

目前已经分别验证通了三个独立环节：模型POST提交到后端、后端序列化为JSON返回客户端、浏览器可以正常下载JSON文件，但无法在同一次请求中同时完成提交用户编辑的模型数据和触发对应JSON文件下载两个操作。

最终实现 #

直接在前端完成JSON序列化和下载触发，不需要走后端接口请求，封装通用的文件保存函数即可：

function saveData(data, fileName) {
    // 将数据转为JSON字符串，存入Blob对象（类文件对象，无需存储在服务端即可直接用于下载）
    const json = JSON.stringify(data);
    const blob = new Blob([json], { type: "octet/stream" });

    // 为Blob生成可访问的临时URL
    const url = window.URL.createObjectURL(blob);

    // 创建隐藏的a标签用于触发下载
    const a = document.createElement("a");
    a.style = "display: none";
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);

    // 触发a标签点击事件启动下载
    a.click();

    // 释放Blob对应的临时URL，页面卸载时浏览器会自动执行该操作，不再使用时手动释放为最佳实践
    window.URL.revokeObjectURL(url);

    // 移除页面上临时创建的a标签
    a.remove();
}

使用时直接传入当前编辑的模型对象和自定义文件名调用该函数即可完成导出，不需要额外后端交互，逻辑简单且性能更好。

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