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

  答:也是三步

  第一步:获取文件的 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. Spring boot @Transactional

    1.注解@Transactional 2.异常回滚 TransactionAspectSupport.currentTransactionStatus().setRollbackOnly(); @Ov ...

  2. [ZJU 1003] Crashing Balloon

    ZOJ Problem Set - 1003 Crashing Balloon Time Limit: 2 Seconds      Memory Limit: 65536 KB On every J ...

  3. JS中包含6种错误类型

    1.SyntaxError(语法错误) 解析代码时发生的语法错误 eg:var 1a; Uncaught SyntaxError: Unexpected number 2.ReferenceError ...

  4. Understanding the Module Pattern in JavaScript

    Understanding the Module Pattern in JavaScript Of all the design patterns you are likely to encounte ...

  5. unity项目中使用BUGLY遇到的的几个问题

    1,第一次对外测试中,发现某些机型游戏中卡死了,但bugly上没报错.后来发现是我们的代码使用 try catch把异常捕获了但什么都没做. 2,别人家项目的bugly上报都能显示出文件和代码行,我们 ...

  6. PHP 几种常用框架的区别

    工作中使用的是TP框架,在工作之余接触了一下Yii框架和Laravel框架,为了更好的了解几种框架,此处总结一下几种框架各自的优势及缺点. 一.CI框架 CI框架是一个简单快速的PHP MVC轻量级框 ...

  7. win10蓝屏1

    win10一直蓝屏. 事件查看里有系统错误提示 DCOM部分组件错误,表现为:应用程序-特定 权限设置并未向在应用程序容器 不可用 SID (不可用)中运行的地址 LocalHost (使用 LRPC ...

  8. vue+ts修改父组件属性的写法。

    部分代码如下: 父组件:   <coupon  :modifyFlag.sync="flag" />    data() {     return {       fl ...

  9. JMeterContext----上下文

    http://jmeter.apache.org/api/org/apache/jmeter/threads/JMeterContext.html org.apache.jmeter.threads ...

  10. Pku2054 Color a Tree

    有一个N个结点的有根树,1是这个树的根.现在要对这N个结点依次进行染色,每个结点染色要花费1个单位的时候,同时要满足一个结点仅在其父亲被染色后才可被染色,每个结点有个权值Ci,如果我们在第Ti时间对i ...