从服务器下载文件并在AngularJS中指定文件名

Question

我正在尝试从我的服务器（spring mvc控制器）下载zip文件。以下是我在angularjs（1.5）控制器中下载zip文件的代码。

   $http({
            url: '/myurl',
            method: 'GET',
            headers: {
                'Content-type': 'application/zip'
            },
            responseType: 'arraybuffer'
        }).success(function (data,status,headers) {
            var blob = new Blob([data], {type: "application/zip"});
            var objectUrl = URL.createObjectURL(blob);                
            var file = headers('Content-Disposition');               

            window.open(objectUrl);

        });

以上代码是可行的，但我需要使用响应头中获取到的文件名来下载文件。我从header('Content-Disposition')中获取到了文件名，如何使用这个文件名来下载文件？目前它会给出任意的文件名。

我尝试过下面的代码，它在Chrome浏览器中可以工作，但在Mozilla浏览器中不起作用...有没有其他解决方案可以在所有浏览器中工作呢？

            //var anchor = document.createElement("a");
            //anchor.download = "ATMOSLogFiles.zip";
            //anchor.href = objectUrl;
            //anchor.click();

感谢您的帮助！

- Ali

---

尝试搜索“Spring Attachment”。 - blackmiaool

你为什么要设置一个请求头 'Content-type': 'application/zip'？这是一个GET请求。请求中没有主体来描述内容类型。 - Quentin

有任何反馈或建议吗？ - lin

Angular File Saver 是一个很好的 polyfill。 - georgeawg

嗨@lin，我已经尝试了你提到的选项，注释掉的代码做了你提到的相同的事情，但不确定为什么在Mozilla上不起作用，但在Chrome上可以。现在我正在使用https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js js，它有一个函数saveAs(blob,fileName)，它工作得非常好... - Ali

Answer 1

一种基于 Blob 的解决方案：

您可以使用 angular-file-saver 来实现此目的。

var app = angular.module('myApp', ['ngFileSaver'])

app.controller('ExampleCtrl', ['FileSaver', 'Blob', function () {
    $scope.download = function () {
        var myData = new Blob([text], { type: 'text/plain;charset=utf-8' });
        FileSaver.saveAs(myData, 'text.txt');
    }
}]);

---

基于HTML5的另一种解决方案：

使用HTML5中的download属性/MDN文档是一种简单的方法。不需要Blobs。支持AngularJS的任何浏览器和浏览器版本均支持此属性（不包括IE10 / IE11，但IE Edge支持它）。

<a href="<downloadLink>" download="fileName">Download</a>

- lin

Answer 2

@lin提供的答案是正确的，但我想补充一点，根据问题的要求，可以直接将服务器上设置的文件名传递到客户端文件名中，方法如下：

只需安装angular-file-saver，在您的应用程序中引用它并将其注入为依赖项。

    var app = angular.module('myApp', ['ngFileSaver']);
    app.controller('mainCtrl', ['FileSaver', 'Blob', '$http', '$scope', function(FileSaver, Blob, $http, $scope) {
              // make ajax call to server
      $scope.download = function() {
           var req = {
               url: 'your server url',
               method: 'GET',
               responseType: 'arraybuffer'
           };
         $http(req).then(function(resp){
                var serverData = new Blob([resp.data], {type: resp.headers()['content-type']});
                FileSaver.saveAs(serverData, resp.headers()['content-disposition']); // File name set at server passed to the FileSaver function
         });
      }
}]);

- Frederick Eze