前端处理二进制流数据，实现下载功能

最新推荐文章于 2023-12-14 22:30:00 发布

原创最新推荐文章于 2023-12-14 22:30:00 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了如何使用JavaScript处理Blob对象并模拟点击事件，以实现从接口获取的blob格式数据转化为可下载的zip文件，重点在于创建a标签并设置其href属性来完成下载过程。

直接看代码

let blob = new Blob([res]); // res为接口返回的数据,此时接口返回的是blob格式的数据
let link = document.createElement('a');
link.download = '文件名称.zip';
link.href = URL.createObjectURL(blob); // 文件流生成的url
document.body.appendChild(link);
link.click(); // 模拟按钮点击
URL.revokeObjectURL(link.href); // 释放URL对象
document.body.removeChild(link); // 移除a标签

正常情况下，通过 window.location = url 就可以下载文件。浏览器判断这个链接是资源而不是页面，就会自动下载文件。但是通过文件流生成的url 对应的资源是没有文件名的，需要添加文件名。这时候我们需要创建一个 a 标签实现这个功能。