从后端获取文件流后导出excel

今天工作碰到一个需求，点击按钮导出excel，后端是直接返回的文件流，如下图：

方案一

直接用a标签来改造这个按钮，把下载地址放到href里，因为后端已经在响应头里设置了文件名和文件类型，点击按钮就能下载带有默认文件名的excel文件了。但是这个方案中，地址如果是动态的就不够灵活了。

方案二

按钮不变成a标签，在按钮的点击事件里处理

// 获取baseurl
click(){
    const baseurl= `xxx`;
    // 拼接上导出的地址，如果接口还需要其他参数，都可以直接拼接上
    let url=`${baseurl}/xxx/export/${xxx}`
    // 第二个参数'_self'表示在当前页下载，不打开新的页面
    window.open(url,'_self')
}

方案三

直接处理文件流

axios({
  method: '请求方法(get/post)',
  url: '地址',
  data: '请求参数',
  responseType: 'blob' // 响应数据的类型要设置成blob，不然下载的文件打开会出错
}).then((res) => {
  // 用blob存储二进制文件
  const blob = new Blob([res.data], {
    type: 'application/vnd.ms-excel', // 设置文件类型
  });
  // 创建一个临时的url指向blob对象
  const objectUrl = window.URL.createObjectURL(blob);
  // 创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
  const a = document.createElement('a');
  a.setAttribute('href', objectUrl);
  a.setAttribute('download', '文件名');
  a.click();
  // 5.释放这个临时的对象url
  window.URL.revokeObjectURL(objectUrl);
}).catch(error => {
  ...
});