vue+iview通过a标签实现文件下载是怎么做的?下面详细介绍一下。
在vue中通过a下载exe文件方法一:
注意:如果下载的文件放在本地目录下,一定要将模板文件放到public目录下,否则由于权限问题找不到文件
路径:项目更目录--》public--》tpls--》下载模板.xls
1.1直接使用a标签+download属性
<a:href="downUrl"target="_blank":download="downNm">下载{{downTplNm}}模板</a>
1.2定义文件下载地址和文件名
methods:{
type2Obj:function(type){
switch(type){
case:'wl':
this.downTplNm="白名单",
this.downUrl="../tpls/白名单模板.xls",
this.downNm="白名单模板.xls"
}
}
}
在vue中通过a下载exe文件方法二:
有时候我们需要将文件下载下来而不是直接打开,使用方法一可以实现部分文件下载,但是图片或者PDF等类似文件就会直接打开,这是浏览器默认的行为,有没有方法阻止这种默认的行为,点击a标签的链接执行的都是下载行为呢?另外Chrome对跨域下载文件的支持并不友好,这里提供了一个有效的解决方案:
2.1使用a标签绑定事件
下载{{downTplNm}}模板</a>
2.2定义下载方法
避免CORS问题的一种方法是通过XHR请求获取文件并将文件作为blob,这里使用了axios,但是你可使用你想要的任何lib
importAxiosfrom'axios'
methods:{
downloadItem(url){
Axios.get(url,{responseType:'blob'})
.then(({data})=>{
//为了简单起见这里blob的mime类型固定写死了
letblob=newBlob([data],{type:'application/vnd.ms-excel'})
letlink=document.createElement('a')
link.href=window.URL.createObjectURL(blob)
link.download=url.split('/').pop()
link.click()
.catch(error=>{
console.error(error)
})
})
}
}
总之,在vue中通过a下载exe文件给大家简单的介绍了一些,希望大家多看看。