首页 > 解决方案 > AngularJS & MVC - 从带有附加数据的 JSON 请求中下载文件

问题描述

我有一个使用 ASP.NET MVC 的 AngularJS 应用程序,我想从 MVC 控制器返回一个 JSON 请求,其中一个属性包含一个文件,如果成功,用户可以下载该文件。我有一个用于所有请求的 Base DTO,因此我可以指示成功/失败并返回用户应该看到的任何消息。

在javascript中使用window.open(someURL)方法并点击返回FileResult的MVC操作时,我已经能够成功下载文件。我正在调用相同的方法来生成文件,所以我确定文件正在正确生成。但是,这并不是我想要的用户体验,因为我还想返回附加数据以与文件一起显示给用户。是否可以在 JsonResult 中返回带有附加数据的文件并允许用户下载该文件?我当前的实现下载了文件,但是当我尝试打开它时,我收到错误“Excel 无法打开文件 xxxxxx.xlsx,因为文件格式或文件扩展名无效。验证文件没有损坏并且文件扩展名匹配文件的格式”。

注意:该文件正在服务器端正确创建。我已经能够将其写入目录并成功打开它。我还能够使用 window.open 来调用一个返回 FileResult 的操作,并且该操作也没有任何问题。

这是我试图下载文件的 angularjs 函数:

    $scope.createImportFile = function () {
        ctrl.TestImportCreation.Messages = resetMessageDisplay();
        ctrl.TestImportCreation.IsDownloading = true;
        
        let data = {
            id: ctrl.TestImportCreation.ID
        };
        let service = services.createImportFile(data);
        service.then(function (response) {
            ctrl.TestImportCreation.IsDownloading = false;
            if (response.data.IsSuccess) {
                $scope.downloadFile(response.data.Entity, "ImportTestFile.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            }

            ctrl.TestImportCreation.Messages = response.data.Messages;
        });
    };

    $scope.downloadFile = function (data, fileName, contentType) {
        var blob = new Blob([data], { type: contentType });
        var url = window.URL.createObjectURL(blob);

        var link = document.createElement("a");
        link.setAttribute("href", url);
        link.setAttribute("download", fileName);
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

这是 angularjs 服务调用:

this.createImportFile = function (data) {
    let request = $http({
        method: "POST",
        url: baseUrl + "/CreateTestImport",
        data: data
    });
    return request;
};

这是 MVC 动作:

    [HttpPost]
    [Route("CreateTestImport")]
    public JsonResult CreateTestImport(int id)
    {
        SaveEntityDTO<byte[]> response = new SaveEntityDTO<byte[]>();
        try
        {
            response.Entity = CreateTestImportFile(id);
            response.IsSuccess = true;

            return Json(response, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            response.IsSuccess = false;
            response.AddException(ex);
            return Json(response);
        }
    }

response.Entity 是一个字节[]。

如果你们中的任何一个 javascript/angularJS/.NET 大师知道如何做到这一点,我将非常感谢一些帮助。

标签: c#angularjsasp.net-mvcjsonresult

解决方案


推荐阅读