在 Web 开发中，JavaScript （简称为 JS）已成为一种非常流行的编程语言。它可以用于开发动态和交互式的网页应用，也可以用于操作用户浏览器中的文件系统。其中一个常见的任务是允许用户下载文件，这篇文章将探讨如何使用 JavaScript 实现文件下载功能。
通过 a 标签实现文件下载
最简单的文件下载方法是通过 a 标签来创建一个下载链接。代码如下：
Download PDF
上述代码中，href 属性指定文件的路径，而 download 属性则指示浏览器自动下载该文件，而不是打开它。请注意，如果文件名包含特殊字符或空格，则应将其 URL 编码。
尽管这种方法简单易用，但有时您需要更好地控制文件下载过程。例如，可能需要在下载之前执行一些逻辑，或者需要动态生成文件内容。在这种情况下，您可以使用 XMLHttpRequest （XHR）对象。
使用 XMLHttpRequest 对象实现文件下载
XMLHttpRequest 是一个 JavaScript API，它可用于创建 HTTP 请求并接收服务器响应。可以使用 XHR 对象来请求文件，并使用 Blob 或 ArrayBuffer API 将其保存到本地文件系统中。以下是一个使用 XHR 下载文件的示例：
function downloadFile(url, filename) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.onload = function() {
const blob = xhr.response;
const a = document.createElement("a");
const objectUrl = URL.createObjectURL(blob);
a.href = objectUrl;
a.download = filename;
a.click();
URL.revokeObjectURL(objectUrl);
};
xhr.send();
}
downloadFile("path/to/file.pdf", "file.pdf");
上述代码中，downloadFile 函数接受文件的 URL 和要保存的文件名作为参数。它创建一个新的 XHR 对象，并将其 responseType 属性设置为 blob。XHR 对象发送 GET 请求获取文件内容，并在响应完成时触发回调函数。回调函数使用 Blob API 创建一个 Blob 对象，该对象包含服务器响应的二进制数据。它创建一个链接元素，并将 Blob 对象转换为 URL。它指定链接元素的 download 属性和 click() 方法来模拟用户单击下载按钮。
需要注意的是，Blob 对象可能会占用大量内存。在下载完成后，应该及时释放 Blob 对象所占用的资源，以避免浏览器崩溃。可以通过调用 URL.revokeObjectURL() 方法来释放 object URL。
结论
通过 JavaScript 实现文件下载并不难，您可以使用 a 标签或 XMLHttpRequest 对象来实现它。如果您需要更好地控制文件下载过程，则最好选择使用 XMLHttpRequest 对象。无论您选择哪种方法，都应该记得在下载完成后释放内存资源。