前端文件下载知识点汇总：从超链接到 Blob 下载

2023-04-10 14:44:29

前端文件下载：从超链接到 Blob

在当今数字时代，文件下载是网络浏览的重要组成部分。无论是文档、图像、视频还是应用程序，我们每天都会从互联网下载各种类型的文件。前端文件下载是指使用浏览器将文件从服务器传输到本地计算机的过程。本文将深入探讨前端文件下载的两种主要方法：通过超链接和通过 Blob 对象。

通过超链接下载文件

超链接是前端文件下载最简单、最直接的方式。只需在 HTML 代码中创建一个超链接，并将其 href 属性指向要下载的文件即可。当用户单击该超链接时，浏览器会自动启动下载过程。

<a href="myfile.txt">下载文件</a>

通过 Blob 下载文件

Blob 对象是 JavaScript 中表示二进制数据的特殊对象。它允许我们在前端创建和操作二进制数据，而无需直接访问文件系统。通过使用 Blob，我们可以创建指向下载文件的 URL，并提供对下载进度的访问。

const blob = new Blob(["Hello, world!"], {type: "text/plain"});
const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = "myfile.txt";
a.click();

URL.revokeObjectURL(url);

获取文件下载进度

在某些情况下，我们可能希望跟踪文件下载的进度，以便向用户显示进度条。这可以通过使用 XMLHttpRequest (XHR) 对象来实现。XHR 对象提供了一个 onprogress 事件，它允许我们在文件下载过程中监听进度更新。

const xhr = new XMLHttpRequest();
xhr.open("GET", "myfile.txt", true);
xhr.responseType = "blob";

xhr.onprogress = function(e) {
  const progress = e.loaded / e.total * 100;
  console.log(`下载进度：${progress}%`);
};

xhr.onload = function() {
  const blob = xhr.response;
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "myfile.txt";
  a.click();

  URL.revokeObjectURL(url);
};

xhr.send();