常见文件下载方式

对一些文档或者资源网站，都会存在一些文件需要下载。本文针对文件下载，列举一些常用的下载方式。

1、使用a标签

使用自带属性download

<a href="http://127.0.0.1:5500/xxx.doc" download>Download Doc</a>

function downFileByA(url，fileName) {
  const a = document.createElement("a");
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  a.remove();
}

一般使用场景：用于静态文件、不需要特殊处理、不需要额外的鉴权或权限控制的简单文件下载场景

2、window.location.href/window.open

window.location.href = 'http://127.0.0.1:5500/xxx.doc';
window.open( 'http://127.0.0.1:5500/xxx.doc');

一般使用场景：适用于需要在特定事件触发后立即下载文件的场景，不需要特殊处理、不需要额外的鉴权或权限控制的文件下载

3、Fetch API 和 Blob 对象

原理：通过将Blob对象转为url,这个临时的url可供浏览器访问，如果文件过大需要一次性生成的url过长会导致文件下载失败，就需要采用分块处理。

fetch('http://127.0.0.1:5500/xxx.doc')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'xxx.doc';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });

一般使用场景：适用于需要异步获取文件内容，动态生成下载链接，可对请求做特殊处理，额外的鉴权或权限控制的下载场景

4、XMLHttpRequest（XHR）

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:5500/xxx.doc', true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'xxx.doc';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
};
xhr.send();

适用于需要在旧版浏览器中进行文件下载