利用iframe下载文件和利用a标签下载文件有哪些区别?
1. iframe如何实现下载文件
2. a标签如何下载文件
3. 两者之间的区别有哪些
1.iframe下载
<a ms-click="goFileClick(el)" id="welcomeMiddleBtn" style="color:#2093ee;cursor: pointer;padding-left:10px">{{el.fileName}}
<iframe style="width:0px;display:none" id="iframefiledown" ></iframe>
</a>
goFileClick:function(el){
var fileUrl=encodeURI(el.fileUrl);
document.getElementById("iframefiledown").src=httpUrl+"/file/download?fileUrl="+fileUrl;
},
httpUrl:接口地址
fileUrl:前端参数传给后端时一定要转码,不然在IE浏览器中会出现乱码问题。
2.A标签下载
<a ms-href="window.httpUrl+'/file/download?fileUrl='+encodeURI(el.fileUrl)" id="filebtn">
{{el.fileName}}
</a>
3.两者之间的区别
相同点:
iframe、a标签下载文件都是调用浏览器默认下载行为
不同点:
- iframe不支持右键另存为下载文件,a标签支持
- 下载文件时可以通过隐藏的iframe进行文件下载,隐秘性比较好,而通过a标签下载文件路由地址都暴露出来,隐秘性不是很好,接口及路由参数暴露在页面上。
- 可使用iframe进行跨域访问或下载文件,a标签不行
- 在低版本中(ie8一下)iframe下载文件存在兼容性问题,a标签兼容性很好。
写在最后
如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏,毕竟原创不易;如果您觉得文章有什么地方写得不对或者需要改进的地方,欢迎通过评论私聊博主!