在前端开发中，我们有时需要实现文件的下载功能。但是，当用户点击下载按钮后，依然不知道浏览器何时开始接收文件。本文将介绍如何检测浏览器何时开始接收文件，并提供相应的示例代码。
1. 使用 a 标签下载文件
在 HTML 中，我们通常使用 <a> 标签来实现文件下载：
<a href="/path/to/file.pdf" download="file.pdf">下载</a>
其中，href 属性指定文件路径，download 属性指定下载文件的名称。当用户点击链接时，浏览器将自动下载并保存该文件。
但是，由于浏览器的异步下载行为，我们无法直接判断浏览器何时开始接收文件。因此，我们需要借助 JavaScript 来实现检测。
2. 使用 Fetch API 下载文件
Fetch API 是使用 JavaScript 发送网络请求的一种方式，它可以用于下载文件。我们可以通过 Fetch API 的 response.body 属性获取文件内容，并从中获取文件大小以计算下载进度。
-- -------------------- ---- -------
----- --- - --------------------
------------------------ -- -
----- ------------- - ---------------------------------------
--- -------------- - --
----- ------ - --------------------------
-------- ------ -
--------------------- ----- ----- -- -- -
-- ------ -
--------------------
-------
-
-------------- -- -------------
----- -------- - -------------- - --------------
---------------------------- - --------
-------
---
-
-------
---在上述示例代码中，我们首先通过 Fetch API 发送文件下载请求，并获取 response 对象。然后，我们从 response 对象的 headers 属性中获取文件大小，使用 response.body.getReader() 方法获取 ReadableStream 对象，并通过递归调用 reader.read() 方法实现文件内容的读取。
当文件读取完成时，done 参数为 true，此时我们可以判断文件已经下载完成。否则，我们计算当前接收到的数据大小，以及已下载数据占总数据的比例，从而得到下载进度。
3. 使用 XMLHttpRequest 下载文件
除了 Fetch API，我们也可以使用 XMLHttpRequest（XHR）来下载文件。类似地，我们可以利用 XHR 的 onprogress 事件来检测下载进度。
-- -------------------- ---- ------- ----- --- - -------------------- ----- --- - --- ----------------- --------------- ---- ------ ---------------- - -------------- ---------- - ---------- - -------------------- -- -------------- - --------------- - ----- - ------- ----- - - ------ ----- -------- - ------ - ------ ---------------------------- - -------- -- -----------
在上述示例代码中，我们首先创建一个新的 XHR 对象，开启 GET 请求并指定文件路径。然后，我们将 responseType 属性设置为 arraybuffer，以便获取二进制数据。之后，我们通过 onprogress 事件监听下载进度，并计算当前已下载的数据大小占总数据的比例。
当文件下载完成时，我们可以在 onload 事件中处理数据并进行下一步操作。
总结
本文介绍了如何检测浏览器何时接收文件下载，并提供了使用 Fetch API 和 XMLHttpRequest 两种方式的示例代码。这对于需要实现文件下载功能的前端开发人员非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8297