网站首页 > 技术文章 正文
如果后端返回了文件流,前端可以通过以下方式实现文件的导出和下载:
- 使用 <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整合前端实现断点续传、大文件秒传以及多线程上传下载
你 发表评论:
欢迎- 最近发表
-
- Python常用标准库(pickle序列化和JSON序列化)
- Linux json-c使用_linux解析json数据
- 源码推荐(03.04):微信支付的测试,Json数据解析
- 打开JSON文件的六种方法,总有一种适合你
- springmvc项目中接收Android提交json数据
- 一篇文章让你详细了解何为JSON_json到底是什么
- FlinkSQL处理复杂JSON的思路_flinksql解析json数组
- 超级好用的轻量级JSON处理命令jq_json使用教程
- .NET性能系列文章二:Newtonsoft.Json vs System.Text.Json
- 推荐几个开发必备的JSON工具_推荐几个开发必备的json工具
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)