JavaScript 下载文件 MDN - JavaScript

在 web 开发中，有时需要实现下载功能，JavaScript 也可以实现下载功能。本文将介绍如何使用 JavaScript 下载文件。

1. 使用 标签

最简单的实现方式是使用 html 的 标签。设置它的 href 属性为要下载的文件的链接，设置 download 属性为要下载的文件的名称。

<a href="/download/file.zip" download="file.zip">下载</a>

这个链接被点击后会自动将文件下载到本地。

2. 使用 XMLHttpRequest

使用 XMLHttpRequest 对象可以实现异步下载文件。首先创建 XMLHttpRequest 实例，然后使用它的 open() 方法来打开文件的链接。如果你想下载二进制文件，需要将 responseType 属性设置为'blob'，否则默认是文本。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/download/file.zip', true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    // 文件下载成功
    var blob = new Blob([xhr.response], {type: 'application/zip'});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'file.zip';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }
};
xhr.send();

以上代码使用 XMLHttpRequest 对象实现异步下载文件，将文件下载到本地。

3. 使用 fetch

fetch 标准定义了一种独立的 JavaScript API 实现 Ajax 请求。fetch() 方法接收一个 url 参数，然后返回一个 Promise 对象表示响应结果。

fetch('/download/file.zip')
  .then(function(response) {
    return response.blob();
  })
  .then(function(blob) {
    // 文件下载成功
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'file.zip';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  });

以上代码使用 fetch 和 Promise 实现异步下载文件，将文件下载到本地。

总结

本文介绍了通过 标签、XMLHttpRequest 和 fetch 方法实现 JavaScript 下载文件的方法，可以根据实际需求选择不同的方式。