下载文件 JavaScript

在编写 Web 应用程序时，下载文件是必不可少的一项功能。在 JavaScript 中，我们可以使用多种方法来实现文件下载，其中包括使用 URL.createObjectURL() 方法、创建 Blob 对象并使用 URL.createObjectURL()、使用 XMLHttpRequest 对象发出 GET 请求等等。下面我们将按照步骤介绍如何使用这些方法在 JavaScript 中下载文件。

使用 URL.createObjectURL() 方法下载文件

首先，我们需要获取到需要下载的文件内容，并将其保存为 Blob 对象。接着，我们可以使用 URL.createObjectURL() 方法生成一个 URL，将该 URL 赋值给我们的下载链接的 href 属性，最后，我们将下载链接的 click() 方法触发，即可实现下载。

const downloadFile = (data, fileName) => {
  const blob = new Blob([data], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.click();
  URL.revokeObjectURL(url);
};

创建 Blob 对象并使用 URL.createObjectURL() 方法下载文件

除了直接获取到需要下载的文件内容之外，我们还可以通过下述方式创建一个 Blob 对象，然后使用 URL.createObjectURL() 方法生成下载链接。

const downloadFile = (content, fileName, contentType) => {
  const data = new Blob([content], { type: contentType });
  const url = window.URL.createObjectURL(data);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.click();
  window.URL.revokeObjectURL(url);
};

使用 XMLHttpRequest 对象发出 GET 请求下载文件

最后，我们可以使用 XMLHttpRequest 对象发出 GET 请求以获取需要下载的文件内容，并将其保存为 Blob 对象，再利用 URL.createObjectURL() 方法生成下载链接。

const downloadFile = (url, fileName) => {
  const xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = () => {
    const url = URL.createObjectURL(xhr.response);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    link.click();
    URL.revokeObjectURL(url);
  };
  xhr.open('GET', url);
  xhr.send();
};

以上三种方式均可用于在 JavaScript 中下载文件。根据情况，我们可以针对具体应用场景选择其中一种或多种方法实现文件下载功能。