vue+axios+springboot文件下载
//前台代码
<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文件下载的更多相关文章
- Vue + axios + SpringBoot 2实现导出Excel
Vue + axios + SpringBoot 2实现导出Excel 1. 前端js代码-发送Http请求 /** * 文件下载 * @param url 下载地址 * @param fileNam ...
- vue+axios实现文件下载
功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 axios({ method: 'post', url: 'api/user ...
- vue axios springBoot 跨域session丢失
前端: 在引入axios的地方配置 axios.defaults.withCredentials=true,就可以允许跨域携带cookie信息了,这样每次发送ajax请求后,只要不关闭浏览器,得到的s ...
- 基于Vue + axios + WebApi + NPOI导出Excel文件
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
- 基于Vue、Springboot网站实现第三方登录之QQ登录,以及邮件发送
基于Vue.Springboot实现第三方登录之QQ登录 前言 一.前提(准备) 二.QQ登录实现 1.前端 2.后端 1.application.yml 和工具类QQHttpClient 2.QQL ...
- vue axios 取消上次请求
axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue axios使用form-data的形式提交数据的问题
vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...
随机推荐
- 基于 Blazor 开发五子棋⚫⚪小游戏
今天是农历五月初五,端午节.在此,祝大家端午安康! 端午节是中华民族古老的传统节日之一.端午也称端五,端阳.此外,端午节还有许多别称,如:午日节.重五节.五月节.浴兰节.女儿节.天中节.地腊.诗人节. ...
- java-递归(文件查找)
import java.io.File; /** * @Author: heq * @Date: 2020/6/23 20:51 */ public class Test { public stati ...
- 计算机网络之DDOS
1.什么是DDOS DDOS(Distributed Denial of Service),中文意思为“分布式拒绝服务”,就是利用大量合法的分布式服务器对目标发送请求,从而导致正常合法用户无法获得服务 ...
- 入门大数据---Spark车辆监控项目
一.项目简介 这是一个车辆监控项目.主要实现了三个功能: 1.计算每一个区域车流量最多的前3条道路. 2.计算道路转换率 3.实时统计道路拥堵情况(当前时间,卡口编号,车辆总数,速度总数,平均速度) ...
- 如何通过Elasticsearch Scroll快速取出数据,构造pandas dataframe — Python多进程实现
首先,python 多线程不能充分利用多核CPU的计算资源(只能共用一个CPU),所以得用多进程.笔者从3.7亿数据的索引,取200多万的数据,从取数据到构造pandas dataframe总共大概用 ...
- 哈希传递攻击利用(Pass The Hash)
最近又复习了一下内网的相关知识,把以前的整理了一下发出来做个记录. 0x01 哈希传递攻击概念 有一点内网渗透经验的都应该听说过哈希传递攻击,通过找到相应账户相关的密码散列值(LM Hash,NTLM ...
- PL/SQL 美化器&规则解释&优化代码
前言 PLSQL有非常强大的自定义设置功能,比如美化文件规则, 使用者可以自行定义编辑规则,以便更好的优化SQL语句,增加可读性. 例如以下的部分代码,又长,分段不好,空格太多,结构散乱,还没有注释. ...
- POJ 3263 Tallest Cow 题解
题目 FJ's \(N (1 ≤ N ≤ 10,000)\) cows conveniently indexed 1..N are standing in a line. Each cow has a ...
- [NOI Online #2 提高组]涂色游戏 题解
题目描述 你有 1020 个格子,它们从 0 开始编号,初始时所有格子都还未染色,现在你按如下规则对它们染色: 编号是 p1 倍数的格子(包括 0号格子,下同)染成红色. 编号是 p2 倍数的格子染成 ...
- Java基础笔记05-06-07-08
五.今日内容介绍 1.方法基础知识 2.方法高级内容 3.方法案例 01方法的概述 * A: 为什么要有方法 * 提高代码的复用性 * B: 什么是方法 * 完成特定功能的代码块. 02方法的定义格式 ...