前端写法

    //文件下载
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. LeetCode 第3题:无重复字符的最长子串

    LeetCode 第3题:无重复字符的最长子串 题目描述 给定一个字符串 s ,请你找出其中不含有重复字符的最长子串的长度. 难度 中等 题目链接 https://leetcode.cn/proble ...

  2. Q:如何在Linux系统中查看实时网卡流量

    Linux查看实时网卡流量的几种方式 来源  https://www.jianshu.com/p/b9e942f3682c 在工作中,我们经常需要查看服务器的实时网卡流量.通常,我们会通过这几种方式查 ...

  3. NOIP 游记

    前情提要:color \(100\to 0\),arena \(92/100\to 36\). 最后一场模拟赛喜提 0+0+100+0,挺乐的. Day 0 晚上九点睡,然而还是很早就醒了,但是时间体 ...

  4. HTML - 1、基础

    <!DOCTYPE html> <!-- 指定网页内容的语言 --> <html lang="en"> <head> <!-- ...

  5. 分合之道:最小生成树的 Kruskal 与 Prim 算法

    最小生成树问题 想象你是一位城市规划师,面前摊开一张地图,标记着散落的村庄.你的任务是用最经济的成本,在村庄间铺设道路,让所有村庄互通.这个问题看似简单,却隐藏着一个经典的数学命题:如何在一张&quo ...

  6. 从“技术宅”到"机器人教父",那个用机器人改变世界的年轻人

    写在前面 随着民营企业座谈会的召开,有一位年轻的企业家王兴兴映入了我们的视野.没错就是那个让机器人从实验室走向舞台中央的年轻人. 大家对今年春晚的机器人扭秧歌应该都还印象深刻吧,它就出自于王兴兴创办的 ...

  7. intellij debug模式提示 Method breakpoints may dramatically slow down debugging 解决办法

    直接上图........ 点击图中按钮  或者 快捷键(Ctrl - Shift -F8 ) 出现下图  

  8. Sqoop - [01] 概述

    将关系型数据库(Oracle.MySQL.PG等)数据与Hadoop数据进行转换的工具. 一.Sqoop1和Sqoop2的区别 Sqoop1由client端直接接入Hadoop,任务通过解析生成对应的 ...

  9. Ansible - [05] 配置文件详解

    主配置文件 ansible.cfg 修改sudo相关配置,在实际工作中,可能使用ansible时,所使用的用户并不是root用户,而是管理员给的一个普通用户,所以需要考虑ansible相关配置文件需要 ...

  10. MySQL - [04] 分布式部署&主从复制&读写分离

    一.前言 Q1:为什么需要主从复制? 1.在业务复杂的系统中,有一条SQL语句需要锁表,导致暂时不能使用读的服务,那么就很影响运行中的业务.使用主从复制,让主库负责写,从库负责读,这样即使主库出现了锁 ...