在vue中通过a下载exe文件的方法-创新互联

这篇“在vue中通过a下载exe文件的方法”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“在vue中通过a下载exe文件的方法”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

在新晃等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站制作、成都网站设计 网站设计制作按需求定制设计,公司网站建设,企业网站建设,品牌网站制作,全网营销推广,外贸网站制作,新晃网站建设费用合理。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

在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文件的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!

分享题目:在vue中通过a下载exe文件的方法-创新互联
网页链接:https://www.cdcxhl.com/article20/jojjo.html

成都网站建设公司_创新互联,为您提供关键词优化手机网站建设品牌网站制作标签优化小程序开发网站改版

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

营销型网站建设