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);
                }
            })
 }

本文标签: 浏览器文件兼容问题