下载文件是网上冲浪的一个重要方面。每天下载的文件很多，下载的内容包括二进制文件（如应用程序、图片、视频或音频）和纯文本文件。Web开发人员可以将下载的功能添加到他们的应用程序中，如下所述。我们将介绍三种不同的方法：基本模式-仅使用HTML元素使用JavascriptwithFetchAPI和HTML元素使用XMLHttpRequest和HTML元素，但在复杂场景中我们应该添加进度条方法1：仅使用HTML元素第一种最简单的方法：我们创建一个HTML锚元素并设置其下载属性。,根据定义，当用户点击超链接时，download属性表示将下载目标元素（文件应在href属性中指定）。同时，通过download属性，我们可以指定下载文件的新名称。因此，如果我们要指定下载文件的名称，就应该使用这个属性。但是，当window中的本地窗口弹出时，用户仍然可以更改文件的名称。当然默认的文件名就是我们设置的下载值。如果省略下载值，则使用原始文件名。这个方法很棒，我们不需要根据下载过程做任何事情。同时，即使我们无法在页面上渲染锚点HTML元素，我们也可以通过JavaScript使用这个方法。上面的方法做了同样的事情，我们只是动态创建锚点HTML元素，并在执行下载操作后删除该元素。IMG_URL我们要下载的图片的URLFILE_NAME下载文件的新名称这种方法的局限性在于它必须具有同源策略，因此该属性可以与同源URI一起正常工作。一个常见的场景是当我们想从另一个服务下载一张图片，但是浏览器并没有下载，而是打开了一个新的标签页预览。download这个方法的关键是下载过程自动开始，可以在浏览器本地查看。注意上面的下载过程是如何发送到浏览器进行管理的，浏览器提供一个控制屏幕，显示下载进度。方法2：获取API和HTML元素第二种和第三种方法使用相同的技术，使用锚元素，但我们将文件内容转换为Blob，而不是使用图像URL。然后我们使用createObjectURL方法将其创建为DOMString。请注意，我们在最后使用URL.revokeObjectURL，这在内存管理方面很重要。当我们使用URL.createObjectURL时，即使使用相同的blob对象调用它，也会创建一个新的URL对象。只要URL对象被创建，它就会在页面的生命周期内存在。重新加载页面时，浏览器会释放所有URL对象。但是，我们需要在不再需要这些URL对象时手动释放它们，这对于性能和内存使用来说很重要。该方法的关键点是下载过程会自动开始，但在我们的应用程序中它只会在下载完成后才传递给浏览器。注意上面的GIF。当我们点击下载按钮时，似乎什么也没有发生。这是因为我们程序中的下载服务是异步进行的，下载完成后传递给浏览器。出现此浏览器窗口并单击“保存”后，该文件将自动保存在我们的计算机上。使用这种方法，我们可以从任何服务下载任何类型的文件。但是，问题是这个方法是在程序里面下载的。用户点击之后，他会认为什么都没有发生。因此，在下载大文件时，我们应该给出下载进度条提示。同时，当我们需要在文件下载完成后在应用程序中执行某些操作时，此方法很有用。比如显示一条消息，向后端发送请求渲染一个新的页面等等。方法三：XMLHttpRequest和HTML元素方法三和方法二很相似，我们还是使用了Blob和createObjectURL，但是我们将使用XMLHttpRequest而不是FetchAPI。我们使用XMLHttpRequest而不是Fetch，因为FetchAPI目前不提供进度接口，但XMLHttpRequest提供。首先，onreadystatechange方法和方法二有点类似。将响应的数据下载为Blob对象，创建DOMString，然后使用锚元素下载文件。在onprogress方法中，我们使用e.loaded和e.total来计算下载进度百分比和已用时间，以及下载速度和剩余时间。请注意上面的GIF，我们的行为与方法二相同，但我们可以监控进度。文件完全下载后，它被发送到浏览器，最终保存到磁盘。总结以上三种方法，后者是前者的升级。第一种方法非常简单。我们可以通过浏览器本身来控制下载的进度。当应用程序不一定根据下载状态执行某些操作时，首选此方法。第二种方法在文件下载完成后通知浏览器。这种做法是，我们可以控制应用程序内部的下载，根据其状态做出反应。这种方法对于下载小文件友好且快速。当下载文件过大时，如果UI上没有提示下载，用户可能会认为应用有问题。在最后一个方法中，我们实现了下载的进度，类似于浏览器显示进度的方式。作者：Jimmy链接：https://juejin.cn/post/7133614988123766821来源：稀土掘金版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
