从服务器下载文件并在 angularjs 中给出文件名答案

【问题标题】：Download a file from server and giving filename in angularjs从服务器下载文件并在 angularjs 中给出文件名
【发布时间】：2017-03-13 09:33:51
【问题描述】：

我正在尝试从我的服务器（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();

感谢您的帮助！

【问题讨论】：

尝试搜索“弹簧附件”
你为什么首先使用 Ajax？
为什么要设置'Content-type': 'application/zip'的请求头？这是一个 GET 请求。请求中没有正文来描述其内容类型。
有什么反馈或建议吗？
Angular File Saver 是一个很好的 polyfill。

标签： javascript angularjs zip

【解决方案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 attribute / MDN documentation 的简单方法。不需要斑点。任何支持 AngularJS 的浏览器和浏览器版本都支持此属性（不包括 IE10/IE11 - IE Edge 确实支持它）。

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

【讨论】：

【解决方案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
         });
      }
}]);

【讨论】：