你如何用AngularJS或Javascript下载文件？

我在隐藏的textarea中有一些文本。 当一个button被点击时，我想将提供的文本作为一个.txt文件提供下载。 这可能使用AngularJS或Javascript？

Answer 1

你可以用Blob做这样的事情。

 <a download="content.txt" ng-href="{{ url }}">download</a> 

在你的控制器中：

 var content = 'file content for example'; var blob = new Blob([ content ], { type : 'text/plain' }); $scope.url = (window.URL || window.webkitURL).createObjectURL( blob ); 

为了启用url：

 app = angular.module(...); app.config(['$compileProvider', function ($compileProvider) { $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/); }]); 

请注意

每次调用createObjectURL（）时，都会创build一个新的对象URL，即使您已经为同一个对象创build了一个对象。 当你不再需要它们时，每一个都必须通过调用URL.revokeObjectURL（）来释放。 当文档被卸载时，浏览器会自动释放这些文件; 但是，为了获得最佳的性能和内存使用情况，如果有明确卸载它们的安全时间，则应该这样做。

来源： MDN

Answer 2

只需点击button下载使用下面的代码。

在HTML中

 <a class="btn" ng-click="saveJSON()" ng-href="{{ url }}">Export to JSON</a> 

Answer 3

尝试这个

 <a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf"> 

并访问这个网站可能对你有所帮助:)

http://docs.angularjs.org/guide/

Answer 4

这可以在JavaScript中完成，而无需打开另一个浏览器窗口。

 window.location.assign('url'); 

将“url”replace为您的文件的链接。 你可以把它放在一个函数中，如果你需要触发一个button的下载，用ng-click调用它。

Answer 5

在我们当前的项目中，我们有一个不可见的iFrame，我不得不将这个文件的url提供给iFrame来获得一个下载对话框。 点击button后，控制器将生成dynamicurl并触发一个$ scope事件，其中列出了自定义directive 。 如果指令不存在，指令会将iFrame追加到主体，并在其上设置url属性。

编辑：添加一个指令

 appModule.directive('fileDownload', function ($compile) { var fd = { restrict: 'A', link: function (scope, iElement, iAttrs) { scope.$on("downloadFile", function (e, url) { var iFrame = iElement.find("iframe"); if (!(iFrame && iFrame.length > 0)) { iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>"); iElement.append(iFrame); } iFrame.attr("src", url); }); } }; return fd; }); 

该指令响应一个名为downloadFile的控制器事件

所以在你的控制器你做的

 $scope.$broadcast("downloadFile", url); 

Answer 6

您可以将location.href设置为包含要让用户下载的数据的数据URI 。 除此之外，我不认为有什么办法只用JavaScript来做。

Answer 7

只是想补充一点，如果它不下载文件，因为不安全：blob：null …当您将鼠标hover在下载button上时，必须对其进行清理。 例如，

var app = angular.module（'app'，[]）;

的app.config（函数（$ compileProvider）{

 $compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/); 

Answer 8

我不想要静态url。 我有AjaxFactory来完成所有的Ajax操作。 我从工厂获取url并将其绑定如下。

 <a target="_self" href="{{ file.downloadUrl + '/' + order.OrderId + '/' + fileName }}" download="{{fileName}}">{{fileName}}</a> 

谢谢@AhlemMustapha

Answer 9

我有同样的问题，并花了很多小时find不同的解决scheme，现在我join了这篇文章中的所有意见。我希望这将是有益的，我的答案已经在Internet Explorer 11，Chrome和FireFox上正确testing。

HTML：

 <a href="#" class="btn btn-default" file-name="'fileName.extension'" ng-click="getFile()" file-download="myBlobObject"><i class="fa fa-file-excel-o"></i></a> 

指示：

 directive('fileDownload',function(){ return{ restrict:'A', scope:{ fileDownload:'=', fileName:'=', }, link:function(scope,elem,atrs){ scope.$watch('fileDownload',function(newValue, oldValue){ if(newValue!=undefined && newValue!=null){ console.debug('Downloading a new file'); var isFirefox = typeof InstallTrigger !== 'undefined'; var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; var isIE = /*@cc_on!@*/false || !!document.documentMode; var isEdge = !isIE && !!window.StyleMedia; var isChrome = !!window.chrome && !!window.chrome.webstore; var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; var isBlink = (isChrome || isOpera) && !!window.CSS; if(isFirefox || isIE || isChrome){ if(isChrome){ console.log('Manage Google Chrome download'); var url = window.URL || window.webkitURL; var fileURL = url.createObjectURL(scope.fileDownload); var downloadLink = angular.element('<a></a>');//create a new <a> tag element downloadLink.attr('href',fileURL); downloadLink.attr('download',scope.fileName); downloadLink.attr('target','_self'); downloadLink[0].click();//call click function url.revokeObjectURL(fileURL);//revoke the object from URL } if(isIE){ console.log('Manage IE download>10'); window.navigator.msSaveOrOpenBlob(scope.fileDownload,scope.fileName); } if(isFirefox){ console.log('Manage Mozilla Firefox download'); var url = window.URL || window.webkitURL; var fileURL = url.createObjectURL(scope.fileDownload); var a=elem[0];//recover the <a> tag from directive a.href=fileURL; a.download=scope.fileName; a.target='_self'; a.click();//we call click function } }else{ alert('SORRY YOUR BROWSER IS NOT COMPATIBLE'); } } }); } } }) 

在控制器中：

 $scope.myBlobObject=undefined; $scope.getFile=function(){ console.log('download started, you can show a wating animation'); serviceAsPromise.getStream({param1:'data1',param1:'data2', ...}) .then(function(data){//is important that the data was returned as Aray Buffer console.log('Stream download complete, stop animation!'); $scope.myBlobObject=new Blob([data],{ type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); },function(fail){ console.log('Download Error, stop animation and show error message'); $scope.myBlobObject=[]; }); }; 

在服务中：

 function getStream(params){ console.log("RUNNING"); var deferred = $q.defer(); $http({ url:'../downloadURL/', method:"PUT",//you can use also GET or POST data:params, headers:{'Content-type': 'application/json'}, responseType : 'arraybuffer',//THIS IS IMPORTANT }) .success(function (data) { console.debug("SUCCESS"); deferred.resolve(data); }).error(function (data) { console.error("ERROR"); deferred.reject(data); }); return deferred.promise; }; 

BACKEND（在SPRING上）：

 @RequestMapping(value = "/downloadURL/", method = RequestMethod.PUT) public void downloadExcel(HttpServletResponse response, @RequestBody Map<String,String> spParams ) throws IOException { OutputStream outStream=null; outStream = response.getOutputStream();//is important manage the exceptions here ObjectThatWritesOnOutputStream myWriter= new ObjectThatWritesOnOutputStream();// note that this object doesn exist on JAVA, ObjectThatWritesOnOutputStream.write(outStream);//you can configure more things here outStream.flush(); return; } 

Answer 10

如果您有权访问服务器，请考虑将标题设置为这个更一般的问题中的答案 。

 Content-Type: application/octet-stream Content-Disposition: attachment;filename=\"filename.xxx\" 

阅读对该答案的评论，build议使用比八位字节stream更具体的内容types。