JavaScript 下载文件详解91

在 JavaScript 中，我们可以使用多种方法来下载文件，包括使用 ()、、XMLHttpRequest 和 fetch() API。

使用 ()

() 方法会在新窗口或标签中打开一个 URL。我们可以使用它来下载文件，方法是在 URL 中指定文件的路径。("", "_blank");
复制代码

上面的代码会打开一个新标签页，并开始下载文件。

使用

属性包含当前页面的 URL。我们可以使用它来下载文件，方法是将文件的 URL 分配给该属性。 = "";
复制代码

上面的代码会将当前页面重定向到文件的 URL，从而开始下载该文件。

使用 XMLHttpRequest

XMLHttpRequest 对象可以用于向服务器发送 HTTP 请求。我们可以使用它来下载文件，方法是使用 open()、send() 和 responseType 属性。// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置请求方法和 URL
("GET", "");
// 设置响应类型为 blob
= "blob";
// 发送请求
();
// 请求完成后的处理程序
= function() {
if ( === 200) {
// 创建文件链接
var fileURL = ();
var a = ("a");
= fileURL;
= "";
// 将链接添加到文档中并单击它
(a);
();
// 移除链接
(a);
}
};
复制代码

上面的代码会向服务器发送一个 GET 请求以获取文件。如果请求成功，它将使用 createObjectURL() 函数创建一个文件 URL，并将该 URL 分配给一个 a 元素的 href 属性。然后，该元素被添加到文档中并单击，从而开始下载文件。

使用 fetch()

fetch() API 提供了一种更现代的方法来向服务器发送 HTTP 请求。我们可以使用它来下载文件，方法是使用 .then() 方法和 responseType 选项。// 向服务器发送 GET 请求
fetch("", {
responseType: "blob"
})
.then(function(response) {
if ( === 200) {
// 创建文件链接
var fileURL = (());
var a = ("a");
= fileURL;
= "";
// 将链接添加到文档中并单击它
(a);
();
// 移除链接
(a);
}
})
.catch(function(error) {
("下载文件时出错：", error);
});
复制代码