前端文件下载

同源文件下载

<a href="文件地址" download="文件名称">Download</a>

给a标签加上download属性，就可以下载了，download的值是下载到本地的文件名称。

跨域文件下载

如果前端和后端不在同一个ip端口下，使用a标签加download属性的方式，浏览器会直接打开文件。

解决方法

1. 通过blob的方式将远程文件请求下来
2. 将请求到的内容赋给a标签的href
3. js触发a标签的点击事件，实现下载

<span onclick="Download(url,name)">download</span>

Download(url,name) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
  xhr.onload = () => {
    if (xhr.status === 200) {
      let url = window.URL.createObjectURL(new Blob([xhr.response]))
      let a= document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.setAttribute('download', name);
      document.body.appendChild(a);
      a.click();
    }
  };
  xhr.send();
}

文件利用了云存储

解决思路
前端向后端请求文件，后端到云存储获取文件，后端返回文件。