这周做项目碰到个需求，请求接口后端返回二进制文件流，前端直接下载成文件，
返回的二进制如下：

1.在axios请求的时候需要添加responseType

XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。

axios({
  method: 'post',
  url: '/export',
  responseType: 'arraybuffer',
})

开始axios请求我没设置responseType下载文件成功但是打不开所以一定要记住

设置responseType，不设置文件打不开！！！

设置responseType，不设置文件打不开！！！

设置responseType，不设置文件打不开！！！

2.responseType添加完之后，嗯 ，直接上代码

// 模板下载
//下载按钮事件
let exportData = (props, b) => {
    console.log(props)
    console.log(b)
    //请求接口
    props.addUser(b).then(res => {
        //设置下载文件类型为xlsx 不同的类型type也不一样，创建URL对象
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
        // 创建A标签
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        // 设置的下载文件文件名
        const fileName = decodeURI(res.headers['content-disposition'].split(";")[1].split("filename=")[1]);
        // 触发点击方法
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
    })
}

需要注意的是如果后端返回解析下载后不是xlsx文件 是其他文件比如“.zip”，“.csv”,“.json”，“.js”…等等的文件你只需要设置不同的type就可以了
比如是.csv文件设置如下

new Blob([res.data], { type: 'text/csv' })

即可！

点击我查看所有类型的type设置

非常感谢无敌小啫喱博主的帮忙！ 谢谢

好了，今天就到此结束（周五坐等下班）