从任何 URL 下载文件 - Javascript

在 Javascript 中，您可以使用一些不同的方法从一个 URL 下载文件。 在本文中，我们将介绍两种最常用的方法。

使用 XMLHttpRequest

XMLHttpRequest 是 Web 开发中最常用的 AJAX 技术之一。 使用 XMLHttpRequest，您可以从一个 URL 下载任何类型的文件。

以下是一个使用 XMLHttpRequest 从 URL 下载文件的简单示例：

function downloadFile(url) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 下载完成后，使用 Blob 创建一个 URL 并下载文件
      var url = window.URL.createObjectURL(this.response);
      var a = document.createElement("a");
      a.href = url;
      a.download = "example.pdf";
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.responseType = "blob";
  xhttp.send();
}

downloadFile("https://example.com/example.pdf");

上面的代码使用 XMLHttpRequest 从 "https://example.com/example.pdf" 下载了一个 PDF 文件，然后使用 Blob 创建了一个 URL，并在浏览器中下载了该文件。

使用 Fetch API

Fetch API 是 ES6 中的一个新特性，它提供了一个更简单的方式从 URL 下载文件。Fetch API 可以使用 Promise，可读性更高并且更易于使用。

以下是一个使用 Fetch API 从 URL 下载文件的示例：

function downloadFile(url) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      // 下载完成后，使用 Blob 创建一个 URL 并下载文件
      var url = window.URL.createObjectURL(blob);
      var a = document.createElement("a");
      a.href = url;
      a.download = "example.pdf";
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    });
}

downloadFile("https://example.com/example.pdf");

上面的代码使用 Fetch API 从 "https://example.com/example.pdf" 下载了一个 PDF 文件，然后使用 Blob 创建了一个 URL，并在浏览器中下载了该文件。

结论

以上是两种从 URL 下载文件的常用方法。无论您选择哪种方法，都应该记得在下载完成后撤销 URL，以确保浏览器不会在内存中泄漏。