前端写法

    //文件下载
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. Air实现Go程序的热重载(热加载)

    简介: air是Go的热加载工具,它可以监听文件或者目录的变化,自动编译,重启程序,提高开发的工作效率. 场景: 在代码修改后需要通过ctrl+c来停止项目,go run的方式来再次重启项目,在开发进 ...

  2. LeetCode 第2题:两数相加

    LeetCode 第2题:两数相加 题目描述 给你两个 非空 的链表,表示两个非负的整数.它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字. 请你将两个数相加,并以相同形式返 ...

  3. 1.Vue3 配置开发-测试环境

    1.根目录新建.env.testing..env.donline文件 2.package.json=>scripts中配置 "start": "vue-cli-se ...

  4. 「ximagine」业余爱好者的非专业显示器测试流程规范,同时也是本账号输出内容的数据来源!如何测试显示器?荒岛整理总结出多种测试方法和注意事项,以及粗浅的原理解析!

    > 由于网页编辑器简陋,无法实现原文档的精心排版,如需原文档可联系... 序 「ximagine」在本篇文章中将介绍「荒岛」目前所使用的显示器测试流程及标准,我们主要使用Calman.Displ ...

  5. 【Java基础总结】集合框架

    集合和数组的区别 集合只存储对象,长度是可变的: 数组既可以存储基本数据类型,又可以存储对象,但长度是固定的. 1. Collection接口 代码演示 1 List<String> c1 ...

  6. 【译】HTTP 文件更新了请求变量

    许多用户都要求在 Visual Studio 的 HTTP 文件中添加对请求变量的支持.使用请求变量,您可以发送 HTTP 请求,然后在从 HTTP 文件发送的任何后续请求中使用响应或请求中的数据.我 ...

  7. 并发编程 - 线程同步(九)之信号量Semaphore

    前面对自旋锁SpinLock进行了详细学习,今天我们将学习另一个种同步机制--信号量Semaphore. 01.信号量是什么? 在 C# 中,信号量(Semaphore)是一种用于线程同步的机制,能够 ...

  8. [SDOI2008] 洞穴勘测 题解

    似乎所有的线段树分治题都能被 \(LCT\) 平替掉? 一眼动态树,直接 \(LCT\). Connect x y 操作用 \(link(x,y)\) 实现,Destroy x y 操作用 \(cut ...

  9. PowerJob:一款强大且开源的分布式调度与计算框架

      项目名称:PowerJob 项目作者:假诗人 开源许可协议:Apache-2.0 项目地址:https://gitee.com/KFCFans/PowerJob 项目简介 PowerJob(原Oh ...

  10. Deepseek学习随笔(5)--- DeepSeek 在职场中的应用

    自动化办公 在职场中,DeepSeek 可以帮助自动化办公流程,如生成日报.撰写邮件等: 日报生成:请根据今日工作内容生成一份日报 DeepSeek 会生成一份简洁的工作日报,帮助你总结当天的工作内容 ...