SpringBoot 接口输出文件流 & Vue 下载文件流,获取 Header 中的文件名

@GetMapping("/download")
public ResponseEntity<FileSystemResource> download(HttpServletRequest request) {
File file = new File("D:\\VipSoft.zip");
HttpHeaders headers = new HttpHeaders();
headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
headers.add("Content-Disposition", "attachment; filename=" + URLEncoder.encode(file.getName(), "UTF-8"));
headers.add("filename", URLEncoder.encode(file.getName(), "UTF-8"));
headers.add("Access-Control-Expose-Headers", "filename"); //这个要加,否则Vue 在 res.headers['filename'] 时取不到值
headers.add("Pragma", "no-cache");
headers.add("Expires", "0");
headers.add("Last-Modified", new Date().toString());
headers.add("ETag", String.valueOf(System.currentTimeMillis()));
return ResponseEntity.ok().headers(headers).contentLength(file.length()).contentType(MediaType.parseMediaType("application/octet-stream")).body(new FileSystemResource(file));
}

Vue 中获取不到 后面传的 header 是因为少加了 "Access-Control-Expose-Headers"

instance.interceptors.response.use(
response => {
if (response.status >= 200 && response.status < 300) {
var blob = new Blob([response.data], {type: 'application/octet-stream'});
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = filename; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
return response.data
} else {
Message({
message: '请求错误' + response.status,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(response)
}
},
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})

SpringBoot 接口输出文件流 & Vue 下载文件流,获取 Header 中的文件名的更多相关文章

  1. 前端vue下载文件时blob返回流中怎么获取文件名

    我很久之前写了一篇前端vue利用blob对象下载文件,有些人私信我,如果后端返回流失败,给出的json对象该怎么获得?前端获取的流怎么能获取原文件名?其实在那篇文章之后,我就已经针对这两个问题进行了优 ...

  2. Springboot(九).多文件上传下载文件(并将url存入数据库表中)

    一.   文件上传 这里我们使用request.getSession().getServletContext().getRealPath("/static")的方式来设置文件的存储 ...

  3. vue下载文件

    import fileDownload from 'js-file-download' let params = { ", ", "filename":&quo ...

  4. FTP文件操作之下载文件

    前面写了采用ftp上传文件,有了上传怎么能够没有下载呢?如果只有上传没有下载,那上传了也没啥用了.所以今天就跟大家一起学习学习使用ftp下载文件. 知道了怎么上传,那么下载也就变得很简单了,上传是把文 ...

  5. ASP.NET Core 返回文件、用户下载文件,从网站下载文件,动态下载文件

    ASP.NET Core 中,可以在静态目录添加文件,直接访问就可以下载.但是这种方法可能不安全,也不够灵活. 我们可以在 Controller 控制器中 添加 一个 Action,通过此Action ...

  6. HDFS设计思路,HDFS使用,查看集群状态,HDFS,HDFS上传文件,HDFS下载文件,yarn web管理界面信息查看,运行一个mapreduce程序,mapreduce的demo

    26 集群使用初步 HDFS的设计思路 l 设计思想 分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: l 在大数据系统中作用: 为各类分布式 ...

  7. Asp.Net Web Api 2 实现多文件打包并下载文件示例源码_转

    一篇关于Asp.Net Web Api下载文件的文章,之前我也写过类似的文章,请见:<ASP.NET(C#) Web Api通过文件流下载文件到本地实例>本文以这篇文章的基础,提供了Byt ...

  8. webuploader 上传文件 生成链接下载文件

    最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...

  9. AWS S3 递归上传文件和递归下载文件, 以及S3之间拷贝文件夹

    1. 递归上传文件: aws s3 cp 本地文件夹 s3://bucket-name -- recursive --region us-east-1 2. 递归下载S3上的文件夹: cd  本地下载 ...

  10. linux curl命令如何上传本地文件夹和下载文件

    本地有一个文件夹为my_dir,里面有四个文件,分别是test1.txt,user_account,tools_user,plans 要把这个my_dir文件夹传到ftp 192.168.8.251 ...

随机推荐

  1. 《最新出炉》系列初窥篇-Python+Playwright自动化测试-28-处理日历时间控件-上篇

    1.简介 我们在实际工作中,有可能遇到有些web产品,网页上有一些时间选择,然后支持按照不同时间段范围去筛选数据,例如:我们预定火车票或者预定酒店,需要选择发车日期或者酒店的入住与退房时间.宏哥早在之 ...

  2. 基于JuiceFS 的低成本 Elasticsearch 云上备份存储

    杭州火石创造是国内专注于产业大数据的数据智能服务商,为了解决数据存储及高效服务客户需求,选择了 Elasticsearch 搜索引擎进行云上存储.基于性能和成本的考虑,在阿里云选择用本地 SSD EC ...

  3. 🔥🔥Java开发者的Python快速进修指南:函数进阶

    在上一篇文章中,我们讲解了函数最基础常见的用法,今天我想在这里简单地谈一下函数的其他用法.尽管这些用法可能不是非常常见,但我认为它们仍然值得介绍.因此,我将单独为它们开设一个章节,并探讨匿名函数和装饰 ...

  4. 掌握HarmonyOS框架的ArkTs如何管理和共享状态数据

    本文分享自华为云社区<深入理解ArkTs中的AppStorage和LocalStorage>,作者:柠檬味拥抱 . ARKTS(Ark TypeScript)是HarmonyOS应用框架的 ...

  5. AntDesignBlazor示例——列表查询条件

    本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考. 示例代码仓库:https://gitee.com/known/AntDesignDemo 1. 学习目标 重构 ...

  6. NodeJS下载安装

    一.什么是NodeJS? NodeJS是一个开源,跨平台的JavaScript运行环境 二.NodeJS安装包下载 1.打开网址:Node.js (nodejs.org) 2.下载稳定版本 三.Nod ...

  7. 4 HTTP的“四层”和“七层”

    目录 1 四层:TCP/IP 网络分层模型 2 七层:OSI网络分层模型 3 TCP/IP 协议栈的工作方式 1 四层:TCP/IP 网络分层模型 四层是指TCP/IP 网络分层模型. 第一层:&qu ...

  8. Mybatis-Flex核心功能之@Column

    1.是什么? MyBatis-Flex 提供了 @Column 用来对字段进行更多的配置 public @interface Column { /** * 字段名称 */ String value() ...

  9. 操作系统大作业:在Linux环境下模拟实现简单命令解释器(代码部分)

    好家伙   1. 题目要求 一.   课程设计(大作业)目的 熟悉Linux编程环境,加强对Linux命令的理解及函数的运用,完成一个操作系统的部分系统的设计过程.编码.调试,锻炼实际应用能力. 二. ...

  10. 在IDEA启动多个Spring Boot工程实例

    在IDEA上点击Application右边的下三角 ,弹出选项后,点击Edit Configuration 选中需要多实例启动的应用,将默认的Single instance only(单实例)的钩去掉 ...