[英]Download a file from server and giving filename in angularjs
我正在尝试从服务器(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();
感谢帮助 !
您可以使用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 下载属性 / MDN文档的一种简单方法。 无需斑点。 任何支持AngularJS的浏览器和浏览器版本均支持此属性(IE10 / IE11除外-IE Edge确实支持它)。
<a href="<downloadLink>" download="fileName">Download</a>
@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
});
}
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.