前端如何通过后端提供的不同接口实现文件下载

在实现开发中，根据不同的业务场景，后端给的下载接口是不同的：

第一种：

文件已经生成并存放在文件资源服务器上，接口返回的是文件的地址

  res = {
      id:'001002',
      filePath:'http://xxx.xxx.xxx.xx/sourcefile/file.zip'
    }

处理方法1：使用window.open打开，浏览器识别到文件类型时触发下载动作

window.open(filePath)

处理方法2：使用<a>标签，点击时可触发下载

<a download=filePath>

第二种：

文件是服务端生成的，前端拿到文件的二进制Blob对象

image.png

处理方法：使用Blob对象初始化，使用<a>标签下载

//这里的type需要根据你下载的文件类型进行设置，我这里下载的zip
let blob = new Blob([data], { type: 'application/zip' });
let url = window.URL.createObjectURL(blob);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', record.fileName);
document.body.appendChild(link);
//触发下载
link.click();
// 然后移除
document.body.removeChild(link);