前端写法

    //文件下载
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 后端返回流,前端通过流进行下载的更多相关文章

  1. Java代码自动生成,生成前端vue+后端controller、service、dao代码,根据表名自动生成增删改查功能

    本项目地址:https://github.com/OceanBBBBbb/ocean-code-generator 项目简介 ocean-code-generator采用(适用):     ,并使用m ...

  2. Django前端获取后端数据之前端自定义函数

    在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...

  3. .net WebApi 批量文件进行压缩zip以二进制流传输至前端(Vue)下载

    前言:最近接了个项目,需要进行将服务端生成的文件进行打包压缩供前端下载,百度查了下资料,决定采用SharpZipLib C#开园的压缩解压库进行服务器文件压缩,在实现过程,郁闷的是前端接收下载下来的压 ...

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

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

  5. vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发

    vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...

  6. .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

    框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...

  7. 后端 SpringBoot + 前端 vue 打包发布到Tomcat

    近段时间 做了一些前后端的开发 需要在Tomcat里进行发布    把自己整理的分享出来 后端打包 pom.xml 文件 <packaging>war</packaging> ...

  8. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  9. Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面

    文章目录 1.实现的效果 2.Vue前端 3.图片上传 4.字段变量根据自己的字段名自行设置(这里不给出了,哈哈哈) 5.method方法 5.1.图片显示在选择框中,同时返回后端存储的地址 5.2查 ...

  10. netCore3.0+webapi到前端vue(后端)

    第一步创建api项目 创建完成启动F5!! 如图 数据库我用的是mysql 用ef操作数据 开发环境:Win10 + VS2019Mysql服务器版本:8.0.16 1.下载并安装插件(必备) MyS ...

随机推荐

  1. 离线安装IDEA插件:详细步骤指南

    离线安装IDEA插件:详细步骤指南 网络环境下载插件包 访问 https://plugins.jetbrains.com/ 一.准备工作 找到可用的插件文件 访问 https://plugins.je ...

  2. 什么是Lambda架构?

    一.简介 Lambda架构(Lambda Architecture)是由Twitter工程师南森·马茨(Nathan Marz)提出的大数据处理架构. 这一架构的提出基于马茨在BackType和Twi ...

  3. 男人八题-点分治-Acwing252.树

    Acwing252.树 题目分析 树中的路径分为三种 路径两端在同一个子树 路径两端在不同子树 路径有一端是重心 因此可以分情况处理, 对于第一种情况可以进行递归处理, 第二种情况需要使用容斥原理求得 ...

  4. nginx 简单实践:Web 缓存【nginx 实践系列之三】

    〇.前言 本文为 nginx 简单实践系列文章之二,主要简单实践了两个内容:正向代理.反向代理,仅供参考. 关于 Nginx 基础,以及安装和配置详解,可以参考博主过往文章: https://www. ...

  5. 小米手机/红米手机解锁BL详细教程

    由于MIUI解锁风控提升,全部小米默认为支持解锁BootLoader的 但需要登录小米账号后,到开发者选项将设备和账号绑定0-1000小时,一般默认为168小时,部分新机实际几百小时,具体绑定时间,我 ...

  6. CUDA异常捕获

    技术背景 在CUDA编程中有可能会遇到一些相对比较隐蔽的报错,但是直接编译运行cu文件是不显现的.那么可以通过添加一个用于检查的宏,来监测CUDA程序运行过程中可能出现的报错. error.cuh 我 ...

  7. Easyexcel(1-注解使用)

    版本依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</a ...

  8. Vulnhub-Source-1(CVE-2019-15107)

    一.靶机搭建 选择打开选项 选中下载的ova文件,然后导入选择一个存放路径即可 如果遇到不兼容的情况,可以打开.vmx修改,改为和虚拟机一个版本号 二.信息收集 官方信息 Name: Source: ...

  9. [Qt 基础-01] QPushButton

    QPushButton 简介 QPushButton是一个很常用的一个按钮控件,主要用于创建一个可按压的按键.它显示了一 个文本和一个图标.另外,你也可以在创建时,指定一个快捷键. 基本用法 1. 创 ...

  10. js回忆录(2) -- 逻辑表达式,条件语句

    之所以要把逻辑表达式和条件语句放一块写一下,完全是因为二者的联系太过紧密,逻辑运算产生布尔值的结果,而条件语句则根据布尔值决定走那个分支. 逻辑与: &&, 首先逻辑与有逻辑与运算功能 ...