React导出后端传的Excel文件

后端响应的数据格式

文件是由后台生成,传给前端是这样的文件流。

前端请求

Axios({
    url:'xxx',
    method,
    responseType:'blob',
    headers:{...},
    data    //查询导出数据的参数
}).then(res=>{
    const blob=new Blob([res.data])
    let reader=new FileReader()    //将blob格式的响应数据转换为原本的格式,方便判断接口是否返回报错信息
    reader.readAsText(blob)
    reader.onload=e=>{
        if(e.target.result.indexOf('"statusCode"')>=0){
            message.error(JSON.parse(e.target.result).message)
        }else{
            const fileName='导出数据.xlsx'
            if('download' in document.createElement('a')){
                message.success('导出成功')
                const link=document.createElement('a')
                link.download=fileName
                link.style.display='none'
                link.href=URL.createObjectURL(blob)
                document.body.appendChild(link)
                link.click()
                URL.revokeObjectURL(link)
                document.body.removeChild(link)
            }else{
                navigator.msSaveBlob(blob,fileName)
            }
        }
    }
}).catch(
    err=>{console.log(err)}
)

由于设置了responseType:'blob' ,响应数据的状态码、报错信息都获取不到了,无法判断接口是否报错,导致不管后端返回的是文件还是信息都会生成一个Excel文件。方法是将Blob格式数据转换回原本的格式。

猜你喜欢

转载自blog.csdn.net/ifmushroom/article/details/117220888