> ⚠️本文为掘金社区首发签约文章，未获授权禁止转载在 [文件上传，搞懂这8种场景就够了（1452个👍）](https://juejin.cn/post/6980142557066067982) 这篇文章发布之后，阿宝哥收到了挺多掘友的留言，感谢掘友们一直以来的鼓励与支持。其中掘友 **@我的烟雨不在江南** 和 **@rainx** 在文章底部分别发了以下留言： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d54bac9c08884de0bd19234fdf8449f6~tplv-k3u1fbpfcp-zoom-1.image) ------ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bdc2d07af174b57942b21ce3bb2c563~tplv-k3u1fbpfcp-zoom-1.image) 既然掘友有要求，连标题也帮阿宝哥想好了，那我们就来整一篇文章，总结一下文件下载的场景。一般在我们工作中，主要会涉及到 9 种文件下载的场景，每一种场景背后都使用不同的技术，其中也有很多细节需要我们额外注意。今天阿宝哥就来带大家总结一下这 9 种场景，让大家能够轻松地应对各种下载场景。阅读本文后，你将会了解以下的内容： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/573b2552cfec483486c2ab9de7ab571b~tplv-k3u1fbpfcp-zoom-1.image) 在浏览器端处理文件的时候，我们经常会用到 [Blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 。比如图片本地预览、图片压缩、大文件分块上传及文件下载。在浏览器端文件下载的场景中，比如我们今天要讲到的 **a 标签下载**、**showSaveFilePicker API 下载**、**Zip 下载** 等场景中，都会使用到 [Blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) ，所以我们有必要在学习具体应用前，先掌握它的相关知识，这样可以帮助我们更好地了解示例代码。 ### 一、基础知识 #### 1.1 了解 Blob [Blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。**在 JavaScript 中 Blob 类型的对象表示一个不可变、原始数据的类文件对象。** 它的数据可以按文本或二进制的格式进行读取，也可以转换成 [ReadableStream](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream) 用于数据操作。 `Blob` 对象由一个可选的字符串 `type`（通常是 [MIME](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 类型）和 `blobParts` 组成： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1356366e6fd4082ae463e61dea2cd39~tplv-k3u1fbpfcp-zoom-1.image)在 JavaScript 中你可以通过 Blob 的构造函数来创建 Blob 对象，[Blob 构造函数](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob)的语法如下： ```javascript const aBlob = new Blob(blobParts, options); ``` 相关的参数说明如下： - blobParts：它是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8。 - options：一个可选的对象，包含以下两个属性： - type —— 默认值为 `""`，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。 - endings —— 默认值为 `"transparent"`，用于指定包含行结束符 `\n` 的字符串如何被写入。它是以下两个值中的一个： `"native"`，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 `"transparent"`，代表会保持 blob 中保存的结束符不变。 #### 1.2 了解 Blob URL Blob URL/Object URL 是一种伪协议，允许 Blob 和 File 对象用作图像、下载二进制数据链接等的 URL 源。在浏览器中，我们使用 `URL.createObjectURL` 方法来创建 Blob URL，该方法接收一个 `Blob` 对象，并为其创建一个唯一的 URL，其形式为 `blob:/`，对应的示例如下： ```javascript blob:http://localhost:3000/53acc2b6-f47b-450f-a390-bf0665e04e59 ``` 浏览器内部为每个通过 `URL.createObjectURL` 生成的 URL 存储了一个 **URL → Blob** 映射。因此，此类 URL 较短，但可以访问 `Blob`。生成的 URL 仅在当前文档打开的状态下才有效。它允许引用 ``、`` 中的 `Blob`，但如果你访问的 Blob URL 不再存在，则会从浏览器中收到 404 错误。上述的 Blob URL 看似很不错，但实际上它也有副作用。 **虽然存储了 URL → Blob 的映射，但 Blob 本身仍驻留在内存中，浏览器无法释放它。映射在文档卸载时自动清除，因此 Blob 对象随后被释放**。但是，如果应用程序寿命很长，那么 Blob 在短时间内将无法被浏览器释放。因此，如果你创建一个 Blob URL，即使不再需要该 Blob，它也会存在内存中。针对这个问题，你可以调用 `URL.revokeObjectURL(url) ` 方法，从内部映射中删除引用，从而允许删除 Blob（如果没有其他引用），并释放内存。现在你已经了解了 Blob 和 Blob URL，如果你还意犹未尽，想深入理解 Blob 的话，可以阅读 [你不知道的 Blob](https://juejin.cn/post/6844904178725158926) 这篇文章。下面我们开始介绍客户端文件下载的场景。随着 Web 技术的不断发展，浏览器的功能也越来越强大。这些年出现了很多在线 Web 设计工具，比如在线 PS、在线海报设计器或在线自定义表单设计器等。这些 Web 设计器允许用户在完成设计之后，把生成的文件保存到本地，其中有一部分设计器就是利用浏览器提供的 Web API 来实现客户端文件下载。下面阿宝哥先来介绍客户端下载中，最常见的 **a 标签下载** 方案。 ### 二、a 标签下载 **html** ```html