//前台代码
<el-button size="medium" type="primary" @click="downloadFile">Test</el-button>
//js函数 downloadFile(){
      this.axios({
        method: "get",
        url: '/api/downloadFile',
        responseType: 'blob',
        headers: {
          Authorization: localStorage.getItem("token")
        }
      })
        .then(response => {
       //文件名 文件保存对话框中的默认显示
         let fileName = 'test.txt';
         let data = response.data;
         if(!data){
           return
         }
         console.log(response);
      //构造a标签 通过a标签来下载
         let url = window.URL.createObjectURL(new Blob([data]))
         let a = document.createElement('a')
         a.style.display = 'none'
         a.href = url
       //此处的download是a标签的内容,固定写法,不是后台api接口
         a.setAttribute('download',fileName)
         document.body.appendChild(a)
         //点击下载
         a.click()
         // 下载完成移除元素
         document.body.removeChild(a);
         // 释放掉blob对象
         window.URL.revokeObjectURL(url);
        })
        .catch(response => {
          this.$message.error(response);
        });
    },
 //后台代码

@RequestMapping(value = "/downLoad", method = RequestMethod.GET)
public static final String downLoad(HttpServletRequest req, HttpServletResponse res){
  Map<String, Object> reMap = new HashMap<>();
  String fileName = "aaa.txt";
  String path = "f:/svss/";
  String filepath = path+fileName;
  OutputStream os = null;
  InputStream is = null;
  try {
    // 清空输出流
    res.reset();
    res.setCharacterEncoding("utf-8");
    res.setContentType("application/octet-stream");
    res.setHeader("Content-Disposition",
      "attachment;filename=" + new String(fileName.getBytes("UTF-8"), "ISO8859-1"));
    // 读取流
    File f = new File(filepath);
    is = new FileInputStream(f);
    if (is == null) {
      reMap.put("msg", "下载附件失败");
    }
    ServletOutputStream sout = res.getOutputStream();
    BufferedInputStream bis = null;
    BufferedOutputStream bos = null;
    bis = new BufferedInputStream(is);
    bos = new BufferedOutputStream(sout);
    byte[] buff = new byte[2048];
    int bytesRead;
    while (-1 != (bytesRead = bis.read(buff, 0, buff.length))) {
      bos.write(buff, 0, bytesRead);
    }
    bos.flush();
    bos.close();
    bis.close();
    is.close();
    os.close();
  } catch (Exception e) {
  reMap.put("msg", "下载附件失败,error:" + e.getMessage());
  }   String str = JsonUtil.map2Json(reMap);
  return str;
}

vue+axios+springboot文件下载的更多相关文章

  1. Vue + axios + SpringBoot 2实现导出Excel

    Vue + axios + SpringBoot 2实现导出Excel 1. 前端js代码-发送Http请求 /** * 文件下载 * @param url 下载地址 * @param fileNam ...

  2. vue+axios实现文件下载

    功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 axios({ method: 'post', url: 'api/user ...

  3. vue axios springBoot 跨域session丢失

    前端: 在引入axios的地方配置 axios.defaults.withCredentials=true,就可以允许跨域携带cookie信息了,这样每次发送ajax请求后,只要不关闭浏览器,得到的s ...

  4. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  5. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  6. 基于Vue、Springboot网站实现第三方登录之QQ登录,以及邮件发送

    基于Vue.Springboot实现第三方登录之QQ登录 前言 一.前提(准备) 二.QQ登录实现 1.前端 2.后端 1.application.yml 和工具类QQHttpClient 2.QQL ...

  7. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  8. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  9. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

随机推荐

  1. 状态机模式 与 ajax 的结合运用

    太神奇了,昨晚做了个梦,梦中我悟出一个道理:凡是涉及到异步操作而且需要返回值的函数,一定要封装成 Promise 的形式,假如返回值取决于多个异步操作的结果,那么需要对每个异步操作进行状态的设计,而且 ...

  2. html+css快速入门教程(5)

    练习: 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位 通过使用 position 属性,我们可以选择 3 种不同类型的定位,这会影响元素框生成的方式. ...

  3. MFC中窗口静态分割&视图切换

    目录 窗口静态分割 单个分割器 声明 准备视图 静态分割窗口&添加视图 使视图大小随窗口大小改变 多个分割器 声明 静态分割窗口&添加视图 使视图大小随窗口大小改变 视图切换 视图之间 ...

  4. Oracle 导出、导入某用户所有数据(包括表、视图、存储过程...)

    Oracle 导出.导入某用户所有数据(包括表.视图.存储过程...)前提:在CMD 命令下 导出命令:exp 用户名/密码@数据库 owner=用户名 file=文件存储路径(如:F:\abcd.d ...

  5. 部署LNMP环境——Yum安装(113资讯网)

    Yum安装优点:安装东西,方便快捷,特别是不用考虑包依赖 教程(Centos做演示,其他系统大同小异): 1.更换国内Yum源: [root@root xx ]# rm -rf /etc/yum.re ...

  6. JAVA基础-继承机制

    需要掌握的知识点: 包的使用 继承时,子类如何覆盖父类方法(重写和重载) 继承时,构造方法的执行过程 JVM中子类如何实例化(先实例化父,再实例化子) super和this关键字 final关键字 包 ...

  7. 深入了解JVM-方法区

    本文首发于微信公众号[猿灯塔],转载引用请说明出处 今天呢!灯塔君跟大家讲: 深入了解JVM-方法区 当JVM使用类装载器装载某个类时,它首先要定位对应的class文件,然后读入这个class文件,最 ...

  8. iframe 透明兼容,设置iframe透明背景的方法

    从IE5.5+就支持iframe框架的背景透明.通过使用allowtransparency和background-color来设置iframe框架的透明效果,代码如下: <iframe src= ...

  9. 6.29模拟赛 (T1:李时珍的皮肤衣 T2:马大嘴的废话 T3:SSY的队列 T4:清理牛棚);

    啊,又是考炸的一天,成功的退步了三名,啊,成共的看错了T1  的题意 ,水了80分. 第十五名就是我,额,已经有点倒数的感觉了,并且一道题都没AC  我太难了. 好了,废话不多说了,下面正式提接: 这 ...

  10. BZOJ1294 洛谷P2566 状态压缩DP 围豆豆

    传送门 题目描述 是不是平时在手机里玩吃豆豆游戏玩腻了呢?最近MOKIA手机上推出了一种新的围豆豆游戏,大家一起来试一试吧游戏的规则非常简单,在一个N×M的矩阵方格内分布着D颗豆子,每颗豆有不同的分值 ...