如何使用AngularJS或Javascript提供下载文件?
我在一个隐藏的文本区域中有一些文本。单击按钮时,我希望将文本作为如何使用AngularJS或Javascript提供下载文件?,javascript,angularjs,Javascript,Angularjs,我在一个隐藏的文本区域中有一些文本。单击按钮时,我希望将文本作为.txt文件提供下载。使用AngularJS或Javascript是否可以实现这一点?您可以将location.href设置为包含要让用户下载的数据的a。除此之外,我不认为只有JavaScript就可以做到这一点。您可以使用Blob来做类似的事情 <a download="content.txt" ng-href="{{ url }}">download</a> 要启用URL,请执行以下操作: app =
.txt
文件提供下载。使用AngularJS或Javascript是否可以实现这一点?您可以将location.href
设置为包含要让用户下载的数据的a。除此之外,我不认为只有JavaScript就可以做到这一点。您可以使用Blob
来做类似的事情
<a download="content.txt" ng-href="{{ url }}">download</a>
要启用URL,请执行以下操作:
app = angular.module(...);
app.config(['$compileProvider',
function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);
请注意
每次调用createObjectURL()时,都会创建一个新的对象URL,即使您已经为同一对象创建了一个。当您不再需要它们时,必须通过调用URL.revokeObjectURL()来释放它们。卸载文档时,浏览器将自动释放这些文件;但是,为了获得最佳性能和内存使用率,如果有安全时间可以显式卸载它们,则应该这样做
来源:在我们当前的工作项目中,我们有一个不可见的iFrame,我必须将文件的url提供给iFrame以获得下载对话框。单击按钮,控制器生成动态url并触发$scope事件,其中列出了我编写的自定义
指令。如果iFrame不存在,则该指令将向主体附加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;
});
我只想补充一点,以防由于不安全:blob:null而无法下载该文件。。。当您将鼠标悬停在下载按钮上时,必须对其进行消毒。比如说,
var-app=angular.module('app',[])
app.config(函数($compileProvider){
试试这个
<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">
我不想要静态Url。我有一个AjaxFactory来完成所有ajax操作。我从工厂获取Url并按如下方式绑定它
<a target="_self" href="{{ file.downloadUrl + '/' + order.OrderId + '/' + fileName }}" download="{{fileName}}">{{fileName}}</a>
感谢@AhlemMustapha这可以在javascript中完成,而无需打开另一个浏览器窗口
window.location.assign('url');
将“url”替换为指向您的文件的链接。如果需要从按钮触发下载,您可以将其放入函数中,并使用ng click调用它。只需单击按钮即可使用以下代码下载
在html中
我也有同样的问题,花了很多时间寻找不同的解决方案,现在我加入了这篇文章中的所有评论。我希望这会有所帮助,我的答案在Internet Explorer 11、Chrome和FireFox上都得到了正确的测试
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>
在职:
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;
};
后端(在SPRING上):
@RequestMapping(value=“/downloadURL/”,method=RequestMethod.PUT)
public void下载Excel(HttpServletResponse,
@请求体映射参数
)抛出IOException{
OutputStream outStream=null;
outStream=response.getOutputStream();//在这里管理异常很重要
ObjectThatWritesOutputStream myWriter=新对象ThatWritesOutputStream();//请注意,JAVA上不存在此对象,
objectthattwritesoutputstream.write(outStream);//您可以在此处配置更多内容
冲水;
返回;
}
< /代码> 如果您在服务器上有访问权限,请考虑将标题设置为.< /p>
阅读关于该答案的评论,建议使用比八位字节流更具体的内容类型。这对我来说很有用:
var a = document.createElement("a");
a.href = 'fileURL';
a.download = 'fileName';
a.click();
您支持哪些浏览器?这可以通过一些创造性的方式解决(如数据URI、Blob、浏览器的历史API等)但这真的取决于。对于不太现代的浏览器来说,这是一个很好的多边形填充。代码片段将是一个很大的帮助。当我将iframe创建置于作用域之外时,上面的指令对我不起作用。$on在它上创建iframe,但在使用broadcastYes$scope时,$on事件不调用。$broadcast仅对儿童有效。您可以将该指令置于顶层范围,如果可能的话。现代浏览器&IE10+@thriqon wow firefox+chrome确实展示了其他浏览器!很棒的解决方案,但是$scope.url
对我来说不起作用。我不得不使用窗口。位置
。我注意到,然后锚定标记的前缀是不安全的。为了避开这个问题,你需要在白色标签上添加“blob”在app.js中使用$compileProvider`.config(['$compileProvider',function($compileProvider){$compileProvider.ahrefsanitationwhitelist(/^\s*(https?| ftp | mailto | tel | file | blob):/)}`任何IE或Safari版本都不支持download
属性,尽管这对我来说非常有用,而且比我们尝试的所有其他方法或IMHO(上面推荐的复杂方法)都要干净得多。Angular完全忽略它。或者,您也可以使用window.open()/$window.open()如果您想尝试在另一个窗口中打开。但在现代浏览器中,您会遇到弹出窗口阻止程序…在Angular 1.3中,$location.href
更改为$window.location.href
,这是一个很好的答案。SO上的以下链接提供了一个完整的工作示例:注意下载
属性,该属性仍然不受任何IE或Safari版本。请在此处查看:当我将其与angular一起使用时,它会将url转到$urlRouterProvider并重定向到我的默认页面,是否有任何解决方案可以下载文件而不是导航?当有人发布这样的链接时,我总是发现它是受欢迎的。@Amrut根据需要为我工作,但你能解释代码吗?像这样的解决方案吗!从服务器获取数据时,例如使用$http.get(…)
确保设置响应类型:'arraybuffer'
,如下所述:在Chrome(Win)中工作,但Safari(Mac)只在浏览器中打开blobbed文件。(blob:https/…)就像这样,这个解决方案让我可以等待我的承诺得到解决。它用Pdf文档代替站点,显示下载对话框窗口。谢谢!非常有魅力。谢谢,这对我来说非常有效,特别是因为我需要大文件传输。如果你有一个字符串要下载,只需将fileURL更改为数据:文本/
<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;
};
@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;
}
Content-Type: application/octet-stream
Content-Disposition: attachment;filename=\"filename.xxx\"
var a = document.createElement("a");
a.href = 'fileURL';
a.download = 'fileName';
a.click();