javascript - 从服务器下载文件并在angularjs中给出文件名

Question

我正在尝试从我的服务器(spring mvc Controller )下载一个 zip 文件。这是我在 angularjs (1.5) Controller 中下载 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 中获得的文件名。我从 header('Content-Disposition') 得到了文件名 如何使用这个文件名来下载文件？目前它给出任何随机文件名。

我尝试了下面的代码，它在 chrome 中有效，但在 mozilla 中无效...是否有任何其他解决方案适用于所有浏览器？

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

感谢您的帮助!

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 attribute/MDN documentation .不需要 Blob 。任何支持 AngularJS 的浏览器和浏览器版本都支持此属性(不包括 IE10/IE11 - IE Edge 确实支持它)。

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