后端接口返回文件流,前端下载(java+vue)

server/2024/12/26 12:58:46/

在这里插入图片描述

各位小伙伴们大家好,欢迎来到这个小扎扎的专栏 总结 | 提效 | 拓展,在这个系列专栏中记录了博主在学习期间总结的大块知识点,以及日常工作中遇到的各种技术点 ┗|`O′|┛

?? 内容速览

本身前端是可以直接通过文件的url对文件进行下载的,但是在进行业务对接开发的时候,前端没有获取文件下载的权限,所以需要后端获取文件之后把获得的文件流传给前端前端通过文件流下载文件。

后端获取

controller层

/*** 根据附件id返回文件流*/
@ApiOperation(value = "根据附件id返回文件流", notes = "传入附件id")
@PostMapping(value = "/getByFileId")
public void getByFileId(HttpServletResponse response, @RequestBody FileIdReq fileIdReq) {matterBasicInfoService.getByFileId(response, fileIdReq.getFileId());
}

service接口

void getByFileId(HttpServletResponse response, String fileId);

实现类

@Override
public void getByFileId(HttpServletResponse response, String fileId) {// 获取附件详情  主要是要附件的url和名字MatterAttachmentFormOdr matterAttachmentFormOdr = matterAttachmentFormOdrService.getById(fileId);log.error("matterAttachmentFormOdr-----:{}", matterAttachmentFormOdr);if (BeanUtil.isEmpty(matterAttachmentFormOdr) || StrUtil.isBlank(matterAttachmentFormOdr.getUrl())) {throw new BusinessValidationException("该文件不存在");}// 附件url替换  如果url可以直接下载的话可以跳过这一步String filePath = matterAttachmentFormOdr.getUrl().replace("......", "......");log.error("filePath-----:{}", filePath);ServletOutputStream out = null;InputStream inputStream = null;try {//与服务器建立连接URL url = new URL(filePath);URLConnection conn = url.openConnection();inputStream = conn.getInputStream();try {//1.设置文件ContentType类型,这样设置,会自动判断下载文件类型response.setContentType("multipart/form-data");response.addHeader("Content-Disposition", "attachment; filename=" + matterAttachmentFormOdr.getName());} catch (Exception e){e.printStackTrace();}out = response.getOutputStream();// 读取文件流int len = 0;byte[] buffer = new byte[1024 * 10];while ((len = inputStream.read(buffer)) != -1) {out.write(buffer, 0, len);}log.error("读取文件流结束。。。。。。。");} catch (Exception e){e.printStackTrace();} finally {try {if (out != null) {out.flush();out.close();}if (inputStream != null) {inputStream.close();}} catch (IOException e) {throw new RuntimeException(e);}}
}

前端下载

handleGetFile(file) {const type = file.url.split('.')['1']if (!file.id) {this.$Message.warning('文件下载失败!')return}// 定义参数const data = { data: {fileId: file.id,},access_token: xxxxxx,}// 调用后端接口this.$store.dispatch('comprehensive/getByFileId', data).then(res => {this.$Message.loading(`正在下载${file.name}数据`)const applicationType = this.getFileTypeMime(type)const blob = new Blob([res.data], { type: applicationType })const link = document.createElement('a')const href = window.URL.createObjectURL(blob) // 创建下载的链接link.href = hreflink.download = `${file.name}` // 下载后文件名document.body.appendChild(link)link.click() // 点击下载document.body.removeChild(link) // 下载完成移除元素window.URL.revokeObjectURL(href) // 释放掉blob对象})
},

http://www.ppmy.cn/server/153320.html

相关文章

鸿蒙UI开发——自定义主题色

1、概述 ArkTs提供了应用内主题切换功能,支持全局主题切换,也支持局部主题切换,效果如下。本文针对主题切换做简单介绍。 2、主题色 ArkTs提供了一套内置主题配色,有Colors对象持有,它包含了默认情况下,关…

IntelliJ IDEA 基本使用教程及Spring Boot项目搭建实战

​ 目录 ​一、简介 二、IntelliJ IDEA 基本使用 三、Spring Boot 项目搭建 一、简介 IntelliJ IDEA 是由 JetBrains 开发的一款强大的 Java 集成开发环境(IDE),广泛用于 Java、Kotlin、Groovy、Scala、Spring 和 Android 等项目的开发。…

Docker 安装Mysql

1.打开docker目录 cd /usr/local/mkdir docker2.创建mysql文件夹 cd /usr/local/dockermkdir mysql3.打开mysql文件夹 cd mysql/4.创建配置文件目录 mkdir config5.打开config cd config/6.编写配置文件 vim my.cnf复制如下: [client] # 端口号 port3306[mysq…

「Java EE开发指南」如何用MyEclipse构建一个Web项目?(一)

在本文中您将找到有关Web项目的信息,将了解: Web项目结构和参数Web开发高效率工具JSP代码完成和验证 这些功能在MyEclipse中可用。 MyEclipse v2024.1离线版下载 一、Web项目结构 用最简单的术语来说,MyEclipse Web项目是一个Eclipse Ja…

LabVIEW软件项目设计方案如何制定

制定LabVIEW软件项目设计方案需要综合考虑需求分析、架构设计、功能模块划分和时间预算等多个方面,确保项目开发过程高效、可控且最终满足目标要求。以下是一个详细的制定流程: ​ 1. 需求分析 目标定义:明确项目的目标,例如数据采…

紫光同创-盘古200pro+开发板

本原创文章由深圳市小眼睛科技有限公司创作,版权归本公司所有,如需转载,需授权并注明出处(www.meyesemi.com) 一、开发系统介绍 开发系统概述 MES2L676-200HP 开发板采用紫光同创 logos2 系列 FPGA,型号:…

sqlite3,一个轻量级的 C++ 数据库库!

宝子们,今天咱来唠唠 sqlite3 这个超棒的轻量级 C 数据库库。它就像是一个小巧但功能齐全的“数据仓库”,能帮咱们轻松地存储、查询和管理数据,无论是开发小型的桌面应用,还是做一些简单的数据处理程序,它都能派上大用…

静态变量和实例变量的区别

静态变量(Static Variable)和实例变量(Instance Variable)在Java中有着不同的特性和用途。以下是它们之间的主要区别: 1. 定义位置与存储位置 静态变量: 定义在类内部,方法外部,并使…