前端 Vue 后端返回流,前端通过流进行下载
前端写法
//文件下载
async handleDownload(row) {
try {
// 假设文件是通过 GET 请求获取的,url 为文件资源的 API 地址
const response = await downloadFile(row.id);
// if (!response.ok) {
// throw new Error('网络错误,文件下载失败');
// }
// 获取文件内容(Blob)
const blob = await response;
if(blob.size == 0){
this.$modal.msgError("文件不存在!");
return;
}
// 通过 Blob 创建下载链接
const url = URL.createObjectURL(blob);
// 创建一个虚拟的 <a> 标签来触发下载
const a = document.createElement("a");
a.href = url;
// 设置下载文件名(你可以从响应中动态获取文件名)
a.download = row.fileName; // 可以修改为从响应头中获取文件名,例如 response.headers.get('Content-Disposition'
// 触发下载
a.click();
// 释放 Blob URL
URL.revokeObjectURL(url);
} catch (error) {
console.error("文件下载失败:", error);
}
},
export function downloadFile(id) {
return request({
url: '/file/downloadFile/' + id,
method: 'get',
responseType: 'blob'
})
}
后端响应
try {
// 设置响应头
response.setContentType(contentType);
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
response.setContentLengthLong(fileLength);
// 使用 IOUtils 进行文件流拷贝
try (OutputStream outputStream = response.getOutputStream()) {
IOUtils.copy(inputStream, outputStream);
}
} catch (IOException e) {
e.printStackTrace();
log.info("文件下载出错:" + e.getMessage());
}
前端 Vue 后端返回流,前端通过流进行下载的更多相关文章
- Java代码自动生成,生成前端vue+后端controller、service、dao代码,根据表名自动生成增删改查功能
本项目地址:https://github.com/OceanBBBBbb/ocean-code-generator 项目简介 ocean-code-generator采用(适用): ,并使用m ...
- Django前端获取后端数据之前端自定义函数
在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...
- .net WebApi 批量文件进行压缩zip以二进制流传输至前端(Vue)下载
前言:最近接了个项目,需要进行将服务端生成的文件进行打包压缩供前端下载,百度查了下资料,决定采用SharpZipLib C#开园的压缩解压库进行服务器文件压缩,在实现过程,郁闷的是前端接收下载下来的压 ...
- 前端vue下载文件时blob返回流中怎么获取文件名
我很久之前写了一篇前端vue利用blob对象下载文件,有些人私信我,如果后端返回流失败,给出的json对象该怎么获得?前端获取的流怎么能获取原文件名?其实在那篇文章之后,我就已经针对这两个问题进行了优 ...
- vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发
vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...
- .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架
框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...
- 后端 SpringBoot + 前端 vue 打包发布到Tomcat
近段时间 做了一些前后端的开发 需要在Tomcat里进行发布 把自己整理的分享出来 后端打包 pom.xml 文件 <packaging>war</packaging> ...
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
文章目录 1.实现的效果 2.Vue前端 3.图片上传 4.字段变量根据自己的字段名自行设置(这里不给出了,哈哈哈) 5.method方法 5.1.图片显示在选择框中,同时返回后端存储的地址 5.2查 ...
- netCore3.0+webapi到前端vue(后端)
第一步创建api项目 创建完成启动F5!! 如图 数据库我用的是mysql 用ef操作数据 开发环境:Win10 + VS2019Mysql服务器版本:8.0.16 1.下载并安装插件(必备) MyS ...
随机推荐
- 定制Allure报告
定制Allure报告 自定义Logo图标 效果图 实现步骤 定位资源文件夹:首先,您需要定位到 allure/plugins/custom-logo-plugin/static 文件夹.这个文件夹通常 ...
- ORACLE SELECT INTO 赋值为空,抛出 NO DATA FOUND 异常
例子: DECLARE ORDER_NUM VARCHAR2(20); BEGIN SELECT S.ORDER_NUM INTO ORDER_NUM FROM SALES_ORDER S WHERE ...
- 使用browser-use进行数据爬取实战记录
前言 前面的文章介绍了browser-use的基本使用,今天带来的分享是使用browser-use进行一次数据爬取的实战(不过还是demo级别的). 使用到的三个玩法分别是使用自己的浏览器.定义输出结 ...
- STC内部扩展RAM的应用
RAM是用来在程序运行中存放随机变量的数据空间,51单片机默认的内部RAM只有128字节,52单片机增加至256字节,STC89C52增加到512字节,STC89C54.55.58.516等增加到12 ...
- 【效能提升】测试人员提bug,应该提供哪些信息以便排查问题?
背景 我们在运维企业级应用时,会遇到很多Bug. 有时候,测试人员或业务方反馈bug,描述得不够详细,我们基于他的描述很难清晰地了解情况,以解决bug. 一般情况下,我们会跟他询问更多的详情,才能知悉 ...
- Mybatis中的 switch
我这遇到个问题,如果 type字段为null则查询type is null,否则查对应的值 询问 AI 得知,可以用choose-when-otherwise <select> selec ...
- MybatisPlus - [05] 逻辑删除
题记部分 一.物理删除&逻辑删除 物理删除:delete from table_name where xxx = ?; 逻辑删除:update table_name set deleted = ...
- Linux - crontab 详解
linux 系统由(crond)这个系统服务来控制的,crond 是 linux 下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,Linux 系统也提供了使用者控制计划任务的命令:cron ...
- NCS开发学习笔记-基础篇-第 1 课 – 安装 nRF Connect SDK 开发环境
练习1 -安装 nRF Connect SDK 开发环境 需要安装的软件 Git python J-Link nrfutil nRF Command Line Tools VScode Chinese ...
- C语言线程池的常见实现方式详解
在 C 语言中,线程池通常通过 pthread 库来实现.以下是一个详细的说明,介绍了 C 语言线程池的常见实现方式,包括核心概念.实现步骤和具体的代码示例. 点击查看代码 1. 线程池的基本结构 线 ...