admin管理员组文章数量:1530518
在非IE浏览器,这个还是比较简单的,相信基本上都知道
<a href="地址" target="_blank" download="下载下来的文件名"></a>
这个地址,应该都不会填错吧,然后就是download这个属性在IE浏览器是不支持的,我百度了好久也是没有找到完美的解决方法,经过本人几天的死扣,最终还是解决了,在项目上亲测的哦,下面上代码
首先这是一个没有后台参与的文件下载,第一步(和大家说一下,这个我是用vue做的,哪个框架对于方法是没有影响的):
//首先创建个get请求,设置responseType:'blob'
const loadFile = function(urls){//怕个地址不是后台给我的,就是我的目标地址
return Axios.get(urls,{
responseType:'blob'
})
.then((data)=>{
if(data){
return data;
}
return Promise.reject({
message:'下载文件失败'
})
})
}
//创建好之后 ,我是将这个请求方法添加到vue原型中供全局使用的
//Vue.prototype.$api = {loadFile}
//具体怎么用的,相信大家也都知道,这个就不多说
接下来就是怎么用了
html:
请点击 <span @click="downLoad('../static/1111.txt')">下载</span>
//方法里传的地址是我要下载的文件,这个看每个人的情况哦
js:
downLoad(url){
this.$api.loadFile(url)
.then((res)=>{
if (window.navigator.msSaveBlob) {//这个是IE浏览器独有的方法,用来判断当时是不是IE浏览器
var data = new Blob([res.data])
window.navigator.msSaveBlob(data,'1111.txt');//此方法即可下载成功
}else {// 谷歌浏览器 创建a标签 添加download属性下载
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = '1111.txt'; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
var event;
if (window.MouseEvent) {
event = new MouseEvent('click');
}else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
})
}
版权声明:本文标题:解决IE浏览器与其它浏览器下载文件兼容问题(纯前端) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1726424400a1070201.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论