前端下载后端的文件流（导出excel文件等）

遇到的项目需求，客户需要选择日期，然后导出对应数据成excel表格并下载，

首先确定后端接口：

响应标头（例如以下格式）：

content-disposition:

attachment;filename*=utf-8''%E6%B8%B8%E5%AE%A2%E6%8A%A5%E8%A1%A8-2024-09-14.xlsx.xlsx

content-type:

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8

前端代码如下：

import axios from 'axios'

 methods: {
      downlist(){
        if(this.time){
           var time=moment(this.time).format('YYYY-MM-DD')
          console.log(time)
          axios({  
            method: 'post', 
            url: 'http://XX.xx.xx.xx:xxx/admin/report', //接口路径
            data: { date: time }, //请求的参数
            responseType: 'blob', // 设置为blob 
          }).then((res) => { 
              let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }));//注意：{ type: '.xlsx' }缺少会导致表格打开后显示object,object
              let a= document.createElement('a');//创建链接
              a.style.display = 'none';//链接样式
              a.href = url;//链接路径
              var name=time+'游客预约列表'//设置excel的名字
              a.setAttribute('download', `${name}.xlsx`);
              document.body.appendChild(a);//添加节点
              a.click();//点击链接自动下载
              url = window.URL.revokeObjectURL(url);
              document.body.removeChild(a)
          })
            .catch((error) => { 
              console.error('Error exporting file:', error); 
           }); 
         
        }else{
             this.$message({
                  type: 'error',
                message: '请先选择时间'
            });
        }
      
      },
}