JavaScript 下载文件

简介

在 Web 应用中，我们经常需要提供文件下载的功能，此时我们可以使用 JavaScript 来实现文件下载功能。本文将介绍如何使用 JavaScript 下载文件。

实现方式

使用a标签

使用 a 标签的 download 属性来实现文件下载功能。

function downloadFile(url, fileName) {
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

downloadFile('http://example.com/file.pdf', 'file.pdf')

该代码将在页面中创建一个 a 标签，将下载链接和文件名分别赋值给 href 和 download 属性，然后在页面中模拟点击该标签以触发下载。

使用XMLHttpRequest

使用 XMLHttpRequest 对象下载文件。

function downloadFile(url, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = xhr.response;
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  };
  xhr.send();
};

downloadFile('http://example.com/file.pdf', 'file.pdf')

该代码使用 XMLHttpRequest 对象发起 GET 请求，并将响应类型设置为 blob。当请求完成后，如果响应状态码为 200，则通过 createObjectURL 方法创建一个 URL 对象，将文件地址赋值给 a 标签的 href 属性，然后在页面中模拟点击该标签。

注意事项

• 当使用 XMLHttpRequest 下载大文件时，可能会出现内存泄漏问题。因此可以在文件下载完毕后手动调用 URL.revokeObjectURL(url) 方法来释放 URL 对象。

结论

介绍了使用 JavaScript 下载文件的两种方式，实现起来非常简单，只需要通过 a 标签或 XMLHttpRequest 对象即可实现文件下载，非常方便。