SpringBoot 接口输出文件流 & Vue 下载文件流,获取 Header 中的文件名
SpringBoot 接口输出文件流 & Vue 下载文件流,获取 Header 中的文件名
为什么浏览器中有些文件点击后是预览,有些是下载:https://www.cnblogs.com/vipsoft/p/18267174
Spring Boot 接口返回文件流 :https://www.cnblogs.com/vipsoft/p/16318030.html
@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")); //如果是 attachment 换成 inline ,像PDF,图片这样的就可以在浏览器内直接预览了 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) })
本文来自博客园,作者:VipSoft 转载请注明原文链接:https://www.cnblogs.com/vipsoft/p/16662762.html
标签:
SpringBoot
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库