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

  答:也是三步

  第一步:获取文件的 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. 交互输入与for语句

    交互输入与for语句 1.   交互输入 read命令可以同时定义多个变量值:输入的内容默认以空格为分隔符,将值输入到对应的变量中:read尽量避免交互 如果默认值过多,最后所有的值会被赋予给最有一个 ...

  2. CSS插入的四种方式

    一.什么是CSS CSS(Cascading style sheets  层叠样式表),CSS可以用以为网页构建样式表,通过样式表来达到对网页进行美化的效果.所谓层叠可以将网页想象成一层层的结构,高层 ...

  3. Comet OJ - Contest #6 D. 另一道树题 并查集 + 思维 + 计数

    Code: #include <cstdio> #include <algorithm> #include <cstring> #include <vecto ...

  4. Android 获取屏幕尺寸与密度(转载)

    android中获取屏幕的长于宽,参考了网上有很多代码,但结果与实际不符,如我的手机是i9000,屏幕大小是480*800px,得到的结果却为320*533 结果很不靠谱,于是自己写了几行代码,亲测一 ...

  5. RabbitMQ(Exchange交换机详解)(四)

    Exchange:接收消息,并根据路由键转发消息所绑定的队列 ClientA,B将消息投递到交换机Exchange上,通过路由关系,投递到指定的queue1或者queue2上,通过监听投递到Clien ...

  6. Redis实现存取数据+数据存取

    添加依赖: <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> ...

  7. react-native modal

    1.属性 animationType(动画类型) PropTypes.oneOf([‘none’, ‘slide’, ‘fade’]) none:没有动画 slide:从底部滑入 fade:淡入视野 ...

  8. codeforces 722F - Cyclic Cipher

    题目链接:http://codeforces.com/problemset/problem/722/F ------------------------------------------------ ...

  9. wow64 32位进程中切换64位模式,取回64位寄存器值

    32位dbg中编辑的: 7711E9D3 | 6A | | 7711E9D5 | E8 | 7711E9DA | | | 7711E9DE | CB | ret far | 6A E8 CB 64位d ...

  10. customizable route planning 工业界地图产品的路径规划

    https://www.microsoft.com/en-us/research/publication/customizable-route-planning/?from=http%3A%2F%2F ...