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

embedded/2024/12/22 17:07:06/

在这里插入图片描述

各位小伙伴们大家好,欢迎来到这个小扎扎的专栏 总结 | 提效 | 拓展,在这个系列专栏中记录了博主在学习期间总结的大块知识点,以及日常工作中遇到的各种技术点 ┗|`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/embedded/147872.html

相关文章

基于SpringBoot+Vue的中药材进存销管理系统

系统展示 系统背景 在中医药行业,中药材的进存销管理是一项至关重要的工作。然而,传统的管理方式往往依赖于纸质记录和人工操作,这不仅效率低下,而且容易出现错误。随着信息化技术的不断发展,越来越多的企业开始寻求通…

宠物管理系统(2):utils

这篇文章介绍写这个系统中使用到的工具类。 验证码生成器 package com.wzb.utils.captcha;import java.util.Random;public class CaptchaUtils {// 定义包含数字和大小写字母的字符集private static final String CHAR_POOL "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmn…

java版Spring Cloud+Mybatis+Oauth2+分布式+微服务+实现工程管理系统

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展,企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性,公司对内部工程管…

SpringBoot 接口API对数据格式的验证 数据验证 格式验证 Validation

依赖 <!--数据验证--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency>参数验证 直接在实体类中定义 Data public class User {Pattern(regexp…

道路运输企业安全生产管理人员安全考核试题

道路运输企业安全生产管理人员安全考核试题 一、单选题 题干&#xff1a;在公交车行驶过程中&#xff0c;乘客王某因与驾驶员发生矛盾&#xff0c;遂殴打驾驶员并抢夺方向盘&#xff0c;造成其他乘客受轻微伤&#xff0c;依照《中华人民共和国刑法》的规定&#xff0c;王某触…

vue应用移动端访问缓慢问题

由于移动端的javascript处理引擎相对于pc端在处理复杂计算或大量数据时&#xff0c;可能会出现性能瓶颈&#xff0c;从而导致访问页面缓慢严重还会出现白屏情况&#xff0c;所以针对此问题做以下处理提升性能。 1、打包时压缩js文件 安装TerserPlugin插件 npm install terser…

中国人工智能学会技术白皮书

中国人工智能学会的技术白皮书具有多方面的重要作用&#xff0c;是极具权威性和价值的参考资料。 看看编委会和编写组的阵容&#xff0c;还是很让人觉得靠谱的 如何下载这份资料呢&#xff1f;下面跟着步骤来吧 步骤一&#xff1a;进入中国智能学会官网。百度搜索“中国智能学…

完全二叉树【东北大学oj数据结构9-1】C++

完全二叉树 所有叶子都具有相同深度且所有内部节点的度数为2的二叉树称为完全二叉树。 另外&#xff0c;将二叉树除最低层以外的所有层都完全填充&#xff0c;从左到最后节点依次填充最低层的树&#xff0c;也称为&#xff08;粗略地&#xff09;完全二叉树。 如果表示二叉堆的…