网站首页 > 技术文章 正文
如果后端返回了文件流,前端可以通过以下方式实现文件的导出和下载:
- 使用 <a> 标签进行下载:
<a href="data:application/octet-stream;base64,文件流的base64编码" download="文件名">下载</a>
将文件流转换为 base64 编码的字符串,并将其作为 href 属性值,设置 download 属性为文件名,这样点击链接时会触发下载操作。
- 使用 JavaScript 实现下载:
function downloadFile(fileData, fileName) {
const blob = new Blob([fileData], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
}
// 在接收到文件流的回调函数中调用 downloadFile 函数
downloadFile(response.data, response.headers['content-disposition']);
这里通过创建 Blob 对象,并将文件流作为其数据源,然后使用 URL.createObjectURL 方法生成一个临时的 URL,将该 URL 赋值给 <a> 标签的 href 属性,设置 download 属性为文件名,最后触发点击模拟下载操作。
根据具体的前端开发框架和需求,也可以使用其他的下载方法,但以上两种方法是一种常见且简单易用的方式。
当使用后端返回的文件流进行前端导出和下载时,还可以考虑以下方案:
- Fetch API 下载:
fetch(url)
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
});
通过 Fetch API 发起对文件流的请求,并将其转化为 Blob 对象。然后使用 URL.createObjectURL 方法生成临时的 URL,将其赋值给 <a> 标签的 href 属性,设置 download 属性为文件名,最后触发点击模拟下载操作。
- 使用 FileSaver.js:
FileSaver.js 是一个开源的 JavaScript 库,可以方便地实现文件的保存和下载。你可以在前端项目中引入文件,并使用它提供的 saveAs 方法进行下载操作。
import { saveAs } from 'file-saver';
fetch(url)
.then(response => response.blob())
.then(blob => {
saveAs(blob, fileName);
});
以上代码中,首先通过 Fetch API 获取文件流并转换为 Blob 对象,然后使用 FileSaver.js 提供的 saveAs 方法进行下载操作。
这些方法可以帮助你在前端利用后端返回的文件流实现导出和下载功能。选择适合你项目需求和开发环境的方式进行实现即可。
猜你喜欢
- 2025-06-13 周均下载百万的TOP 12前端 Ponyfill !
- 2025-06-13 前端文件下载的N种姿势:从简单到高级
- 2024-10-03 JS 下载/导出 csv、excel、txt 、img等文件的方法总结
- 2024-10-03 入门 基础知识点:浏览器到底是如何下载资源的
- 2024-10-03 技术小白的微信小程序搭建之路(六:前端设置)
- 2024-10-03 springboot:实现文件上传下载实时进度条功能【附带源码】
- 2024-10-03 字节内部前端开发手册(完整版),开放下载
- 2024-10-03 前端 ajax 请求 Excel 文件下载的几种方式
- 2024-10-03 前端常见问题和技术解决方案 前端问题是什么意思
- 2024-10-03 springboot整合前端实现断点续传、大文件秒传以及多线程上传下载
你 发表评论:
欢迎- 527℃Oracle分析函数之Lag和Lead()使用
- 524℃几个Oracle空值处理函数 oracle处理null值的函数
- 521℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 507℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 506℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 497℃【数据统计分析】详解Oracle分组函数之CUBE
- 475℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 474℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (61)
- 前端数组 (73)
- 前端排序 (47)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)