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格式数据转换回原本的格式。

export const exportFile = async (url: string, name = '') => {
    const result: any = await service.get(url, { responseType: 'blob' });

    if (result) {
        var blob = new Blob([result], { type: 'application/vnd.ms-excel' });
        let reader = new FileReader();
        reader.readAsText(blob);
        reader.onload = e => {
            let timer = moment().format('YYYY-MM-DDHH:mm:ss');
            const fileName = name + timer + '.xlsx';
            saveAs(blob, fileName);
            message.success('导出成功');
        };
    } else {
        message.error('未返回数据,无法导出');
    }
};