上次说了,实现文件的上传需要三步,那么实现文件的下载呢?

  答:也是三步

  第一步:获取文件的 fileId (或者别的什么的,总之应该是代表这个文件的东西),各家后台需要的都不一样

  第二步:调用接口

    this.$http({
      url:this.HOST + api.download,
      method:'post',
      params:{
        fileId:fileId //此处上传第一步获取到的 fileid
      },
      responseType:'arraybuffer' //此处注意请求头
      }).then(function(res){
        var this = that
        var fileName = that.files.name //此处获取文件名称
        that.download(res.data,fileName) //此处跳转到第三步
      })
  
  第三步:处理返回值,并下载
      

    download (data,fileName) {
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接
      let link = document.createElement('a') //创建a标签
      link.style.display = 'none'  //将a标签隐藏
      link.href = url  //给a标签添加下载链接
      link.setAttribute('download', fileName) // 此处注意,要给a标签添加一个download属性,属性值就是文件名称 否则下载出来的文件是没有属性的,空白白
      document.body.appendChild(link)  
      link.click()  //执行a标签
      }
    
    
   

Vue 实现文件的下载的更多相关文章

  1. springboot整合vue实现上传下载文件

    https://blog.csdn.net/yhhyhhyhhyhh/article/details/89888953 文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文 ...

  2. Weex 实现文件的下载

    需求:在使用weex框架时,我们使用vue文件写页面,在native端加载服务器端的js页面时由于网络状态的不确定性,我们需要在第一次加载的时候对js页面进行本地存储.也就是说我们需要把js文件下载到 ...

  3. Vue.js devtool插件下载安装及后续问题解决

    在中国,你是无法使用谷歌应用商店,所以你下载插件,要使用一些别的手段,一种是下载源码编译,另一种是通过第三方网站.第一种不适合小白,所以现在介绍第二组. 下载插件网站 国外网站:https://www ...

  4. 13、VUE单文件工程

    1.为什么要使用单文件工程? 1.Vue.js路由组件的不方便 不支持引用HTML页面,以至于template里面定义的标签会编辑器当字符串,这让编辑变的困难. 2.Vue.js于Node.js语言结 ...

  5. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  6. nginx处理vue打包文件后的跨域问题

    起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...

  7. vue Excel导入,下载Excel模板,导出Excel

    vue  Excel导入,下载Excel模板,导出Excel vue  Excel导入,下载Excel模板 <template> <div style="display: ...

  8. PHP 文件限速下载代码

    php 文件限速下载代码 <?php include("DBDA.class.php"); $db = new DBDA(); $bs = $_SERVER["QU ...

  9. IOS下载查看PDF文件(有下载进度)

    IOS(object-c) 下载查看 PDF 其实还是蛮容易操作的.在下载前,首先要把 IOS 可以保存文件的目录给过一遍: IOS 文件保存目录 IOS 可以自定义写入的文件目录,是很有限的,只能是 ...

随机推荐

  1. CSS元素居中汇总

    总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使  margin-left=margin-right  如果设置  marg ...

  2. 数位dp进阶(hdu2089,3652)

    之前的文章已经讲过如何求1—r中的特殊数,这篇博客就来讲些进阶操作: 直接看例题(hdu2089): (题目是中文的我就不写大意了) 这题与hdu3555最大的区别就是规定了l,不再以1开始: 解决这 ...

  3. Activiti7整合SpringBoot(十二)

    1 SpringBoot 整合 Activiti7 的配置 为了能够实现 SpringBoot 与 Activiti7 整合开发,首先我们要引入相关的依赖支持.所以,我们在工程的 pom.xml 文件 ...

  4. 【HDOJ6731】Angle Beats(极角排序)

    题意:二维平面上给定n个整点,q个询问 每个询问给定另外的一个整点,问其能与n个整点中任意取2个组成的直角三角形的个数 保证所有点位置不同 n<=2e3,q<=2e3,abs(x[i],y ...

  5. RAC & MVVM 学习资料整理

    最后更新:2017-01-23 参考链接: MVVM奇葩说 MVVM 介绍 Model-View-ViewModel for iOS [译] 唐巧--被误解的 MVC 和被神化的 MVVM React ...

  6. 170815-关于Filter的知识点

    Filter简介:         Filter翻译为中文是过滤器的意思.         Filter是JavaWeb的三大web组件之一:Servlet.Filter.Listener       ...

  7. sql server 高版本数据还原到低版本sql server的注意事项

    生成的sql脚本不能大于100m,否则会报错(System.OutOfMemory) 所以要将较大的sql脚本文件进行分割

  8. kubernetes-traefik(二十一)

    参考文档:http://traefik.cn/ traefik和ingress的对比 ingress: 使用nginx作为前端负载均衡,通过ingress controller不断的和kubernet ...

  9. Linux网卡驱动分析

    以太网(Ethernet)是一种计算机局域网组网技术,基于IEEE 802.3标准,它规定了包括物理层的连线.电信号和介质访问层协议. Ethernet接口的实质是MAC通过MII总线控制PHY的过程 ...

  10. 【转】一个 Vim 重度用户总结的 vim 超全指南

    [转]一个 Vim 重度用户总结的 vim 超全指南 我本人是 Vim 的重度使用者,就因为喜欢上这种双手不离键盘就可以操控一切的feel,Vim 可以让我对文本的操作更加精准.高效. 对于未使用过 ...