JS 下载文件

我比较常用的 chrome 浏览器对能打开的文件，会直接在新标签页打开，如果需要弹出保存框，则需要用 JS 处理。

我在网上寻觅了很多方法，主要集中在 iframe、<a>标签、XMLHttpRequest 三个方法上：

1.iframe

没试成功，放弃。

2.a标签

聚焦于 download 属性，但很少说明这个属性只使用于 同源 URL，只能如下使用：

<a href="/image/demo.jpg" download="demo.jpg">下载</a>

3.XMLHttpRequest

这个方法最通用，但是需要文件服务器解决跨域问题，不多废话，直接上代码：

/**
 * @param url string 网络图片地址，如 http://192.168.88.88:8888/image/demo.jpg
 * @param filename 文件名，如 demo.jpg
 */
function downloadFile(url, filename) {
  const aLink = document.createElement('a');
  const xhr = new XMLHttpRequest();
  xhr.open('get', url);
  xhr.responseType = 'blob';
  xhr.onload = (e) => {
    const { status, response } = e.target;
    if (status === 200) {
      const blob = new Blob([response], { type: response.type });
      let blobUrl = window.URL.createObjectURL(blob);
      aLink.setAttribute('href', blobUrl);
      aLink.setAttribute('download', filename);
      aLink.click();
      window.URL.revokeObjectURL(blobUrl);
    }
  };
  xhr.send(null);
}

记录下来，方便以后 copy 😂