原生JS下载文件（图片等）

因为业务需求的关系要封装一个下载文件的方法，在这里我用的是Ajax

目录

第一种情况（Blob - 利用Blob对象生成Blob URL）

文件下载主要分为以下几步：

第二种情况（a标签下载文件）

---

第一种情况（Blob - 利用Blob对象生成Blob URL）

        给的是一个接口，访问这个接口拿到后台传给我们的文件流，通过Blob以本地方式保存文件

  const xhr = new XMLHttpRequest();
  xhr.open('post', '/test/download');
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  // 解决跨域问题
  xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
  xhr.responseType = 'blob';
  xhr.withCredentials = true;
  xhr.send();
  xhr.onreadystatechange = function () {
    //固定写法
    if (xhr.readyState === 4 && xhr.status === 200) {

      const blobUrl = new Blob([xhr.response], {
        type: 'image/png' //下载文件的类型
      });
      const url = window.URL.createObjectURL(blobUrl); //通过blob创建下载的链接
      const eleLink = document.createElement('a'); //创建a标签用于跳转至下载链接
      eleLink.style.display = 'none'; //隐藏a标签
      eleLink.href = url; //href属性指定下载链接
      eleLink.download = fileName; //dowload属性指定文件名
      document.body.appendChild(eleLink); //将a标签插入body中
      eleLink.click(); //click()事件触发下载
      document.body.removeChild(eleLink); //移除a标签

      window.URL.revokeObjectURL(eleLink); // 释放掉blob对象
    }
  };

文件下载主要分为以下几步：

1. 获取二进制文件流
2. 根据二进制流创建Blob类文件对象
3. 创建一个a元素标签，并隐藏起来
4. 通过创建的Blob类文件对象创建下载链接
5. 给a标签指定文件名和下载链接
6. 将a标签添加进html中，并调用点击事件，下载文件
7. 下载后释放掉Blob类文件对象，并在html中移除此a标签

使用Blob主要是解决跨域下载文件的情况还有二进制文件流的情况！

---

第二种情况（a标签下载文件）

可以下载txt、png、pdf等类型文件

  const eleLink = document.createElement('a');
  eleLink.style.display = 'none';
  eleLink.href = url;
  eleLink.download = fileName === undefined ? '自定义名称' : fileName;
  document.body.appendChild(eleLink);
  eleLink.click();
  document.body.removeChild(eleLink);

但是！在同源的时候是可以直接下载文件，如果是非同源（跨域）的情况下，如果是浏览器可识别的文件类型，那么只会打开这个文件，不会下载，解决的方法还是使用Blob下载！