javascript - 从 HttpPost Asp.Net MVC 方法返回用于保存的文件

Question

我有一个 Asp.Net MVC 项目，在它的一页上，用户可以将加载的数据编辑到表中(更改图像、字符串、项目顺序等...)。

完成所有编辑后，客户端按下“下载”按钮，并将生成的 xml 文件保存在硬盘上，以供将来进行下一次操作。

所以我有一个简单的 html 表单:

 <form name="mainForm" data-ng-submit="sendForm()" ng-controller="ImportController" novalidate enctype="multipart/form-data">

    <!-- table structure definition removed for briefing -->

    <td>
        {{data.Items[$index].Id}}
    </td>
    <td>
        <img class="center-cropped" ng-src="data:image/jpg;base64, {{data.Items[$index].Image}}">
    </td>
    <td>
        <input class="form-control" type="text" value="{{data.Items[$index].LastName}}" />
    </td>

    <td>
        <input class="form-control" type="text" value="{{data.Items[$index].FirstName}}" />
    </td>
    <td>
        <input class="form-control" type="text" value="{{data.ClaimItems[$index].MiddleName}}" />
    </td>
    <input class="btn-success" id="submit-btn" type="submit" data-ng-disabled="mainForm.$invalid" value="Download" />

</form>

此表单数据是通过 angularJs 函数调用发送的，如下所示:

$scope.sendForm = function () {

    // some preparations to send image data through json
    for (var i = 0; i < $scope.data.Items.length; i++) {
        $scope.data.Items[i].ImageAsString = $scope.data.Items[i].Image;
    }

    $http.post("Download", { array: $scope.data })
        .success(function (responseData) {
            console.log(responseData);
        })
        .error(function (responseData) {
            console.log("Error !" + responseData);
        });
};

调用此函数后，准备好的http post请求将发送到asp.net mvc 下载操作:

    [HttpPost]
    public FileResult Download(ItemsArrayWrapper array)
    {
       // here goes incoming data processing logic
       // ...

       return File(array.ConvertToItemsArray().Serialize(), "text/xml", name);
    }

我希望我的 Download 方法返回 FileResult，这样客户端上就会出现一个文件保存对话框。但什么也没发生。

我尝试构造各种响应 header ，返回不同的 MimeTypes，更改 Download 方法的返回类型，甚至尝试从 Download 方法调用 [HttpGet] 方法，但客户端上仍然没有任何显示。

在浏览器网络监控中搜索-仅发送了一个POST请求。

是否可以将数据从 HttpPost 方法发送到客户端，以这种方式从 angularJs 函数调用？我缺少什么，为什么浏览器中没有显示保存对话框？

或者有人可以建议任何其他更合适的解决方案来实现这一目标吗？

Answer 1

I want my Download method to return FileResult, so, that a file saving dialog will appear on the client. But nothing is happening.

没有任何事情发生很正常。我建议您不要使用 AJAX 来下载文件。只需构建一个普通的隐藏 HTML 表单，然后自动将该表单提交到 Download Controller 操作即可。然后会出现“文件保存”对话框，提示用户保存文件。

如果您绝对需要使用 AJAX 来执行此操作，那么应该注意，您可以使用 HTML5 FileAPI允许您将二进制响应保存在 AJAX 回调中。但请注意，这仅适用于现代浏览器，如果您需要在网站中支持某些较旧的浏览器，则无论如何都需要第一种方法。