js 下载文件的方法 需要5种

使用 a 标签实现下载

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

使用 XMLHttpRequest 对象实现下载

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

使用 fetch API 实现下载

function downloadFile(url) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = true;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
}

使用 FileSaver.js 库实现下载

• FileSaver.js 是一个用于在客户端保存文件的 JavaScript 库，支持在浏览器中保存二进制文件。

• 使用 FileSaver.js 需要先在 HTML 文件中引入该库，可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

• 引入完成后，就可以使用 FileSaver.js 的 saveAs() 方法来保存文件了，该方法接受两个参数：文件的 Blob 对象和文件名。

• 下面是一个使用示例：

function downloadFile(url) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      saveAs(blob, 'filename');
    });
}

使用 iframe 实现下载

function downloadFile(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
  setTimeout(() => {
    document.body.removeChild(iframe);
  }, 500);
}