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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端接收并导出后端导出Excel文件,也可以使用`xlsx`和`file-saver`库来实现。 首先,需要使用`fetch`或`axios`等网络请求库向后端请求Excel文件,并将返回的二进制流进行解析。可以使用`xlsx`库的`read`方法将二进制流转换为JSON格式的数据。示例代码如下: ```javascript import { read } from 'xlsx'; import { saveAs } from 'file-saver'; // ... fetch(url, { responseType: 'blob' }).then(res => { const reader = new FileReader(); reader.onload = () => { const data = new Uint8Array(reader.result); const workbook = read(data, { type: 'array' }); // 处理表格数据 // ... // 导出表格数据 const excelBuffer = write(workbook, { type: 'array', bookType: 'xlsx' }); const excelBlob = new Blob([excelBuffer], { type: 'application/octet-stream' }); saveAs(excelBlob, /* 指定的文件名 */); }; reader.readAsArrayBuffer(res.data); }); ``` 以上代码中,`fetch`请求的响应数据类型设置为`blob`,表示返回的是二进制流。接收到响应数据后,使用`FileReader`将二进制流转换为数组缓冲区,再使用`xlsx`库的`read`方法将数组缓冲区转换为JSON格式的数据。接下来根据具体需求进行表格数据处理,并使用`write`方法将数据转换为Excel文件的二进制流,最后使用`file-saver`库的`saveAs`方法将二进制流导出Excel文件。 需要注意的是,在导出Excel文件时,需要设置正确的文件类型和文件名,否则可能会导致文件无法打开或文件名不符合预期。 以上是一个简单的接收和导出Excel文件的流程,具体实现还需要根据具体情况进行相应的调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值