下载导出blob文件类型时如何拿到后端的返回信息

背景:今天在做文件下载导出的时候,遇到一个问题,后端返回的是blob文件类型,成功和错误信息无法正常拿到(code,message,error)信息等。这样就无法读取错误信息,进而去调用下载文件的代码。

       

exportApi(params).then((res: any) => {
        if(res.code===200){
            // 执行下载代码
        }else{
            //提示错误信息
        }
});

         这里的res.code 判断不会进入,因为返回的res类型打印如下:

而后端的返回值如下:

        此时不管接口成功不成功,res里都是没有code的,因为前端拿到的是blob类型的数据,所以会执行else的代码。

        如果想要拿到后端返回的数据,再去根据code执行后续代码,需要通过FileReader去拿到,代码如下:

exportApi(params).then(res=>{
      if (res.data.type === 'application/json') {
          const fileReader = new FileReader();
          fileReader.readAsText(res.data, 'utf-8');
          fileReader.onload = () => {
            const result = JSON.parse(fileReader.result);
            console.log(result,'result')
            if (!String(res.code).startsWith('2')) {
              // 失败返回
              return;
            }
            // 成功->执行download
          };
        }
})

        此时结果打印如下:

        此时可以看到已经拿到后端返回值~


        拓展:那FileReader 是个什么东西呢?

       FileReader 是一种异步读取文件机制。能够读取文件的数据。

        为此,他提供了如下方法:

  1. readAsText(file,encoding) :以纯文本形式读取文件 将读取的文件保存在result属性中 第二个参数用于 指定编码类型 是可选的 一般用于读取txt等文本文件
  2. readAsDataURL :读取文件并将文件以数据URL(base64)的形式保存在result属性中 一般用于读取图片等文件
  3. readASBinaryString(file): 读取文件并将一个字符串保存在reasult中 字符UC哈UN的每一个字符都代表这一小节
  4. readAsArrayBuffer(file) :读取文件并将文件内容的ArrayBuffer 保存在result中

        读取过程是一步的,FileReader 提供了几个事件。

  1. onloadstart:读取文件开始时触发
  2. onprogress:读取过程中触发,会返还本次读取文件的最大字节数和已经读取完毕的字节数,可以用来做进度条
  3. onabort:在读取中断时触发
  4. onerror:在读取文件失败时触发
  5. onload:在读取完成时触发
  6. onloadend:读取结束后触发,不论成功还是失败都会触发,触发时机在onload之后
  • 27
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,那么您可以使用Apache POI库来实现Excel的导出,同结合Spring Boot的响应体ResponseBody和HTTP状态码来实现导出Excel成功返回Blob,失败返回指定报错信息的功能。 具体实现步骤如下: 1. 后端使用Apache POI库创建Excel文件并写入数据。 2. 在Controller中定义一个导出Excel的接口,使用ResponseBody注解将Excel的二进制流写入响应体中,并设置Content-Type为application/vnd.ms-excel,这样前端就可以直接下载Excel文件。 3. 如果导出Excel遇到异常,可以使用try-catch语句捕获异常,并返回指定的报错信息。 4. 可以通过HTTP状态码来进一步标识导出Excel的结果,例如导出成功返回200状态码,失败返回500状态码。 下面是一个简单的示例代码,仅供参考: ```java @RestController public class ExcelController { @GetMapping("/exportExcel") public ResponseEntity<byte[]> exportExcel() { try { // 使用Apache POI创建Excel文件并写入数据 Workbook wb = new HSSFWorkbook(); Sheet sheet = wb.createSheet("sheet1"); Row row = sheet.createRow(0); Cell cell = row.createCell(0); cell.setCellValue("Hello World!"); // 将Excel的二进制流写入响应体中 ByteArrayOutputStream out = new ByteArrayOutputStream(); wb.write(out); HttpHeaders headers = new HttpHeaders(); headers.setContentDispositionFormData("attachment", "example.xls"); headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); return new ResponseEntity<>(out.toByteArray(), headers, HttpStatus.OK); } catch (Exception e) { // 如果导出Excel遇到异常,返回指定的报错信息 return new ResponseEntity<>("导出Excel失败", HttpStatus.INTERNAL_SERVER_ERROR); } } } ``` 在前端中,您可以使用axios或其他HTTP库来调用后端导出Excel接口,例如: ```javascript axios.get('/exportExcel') .then(response => { // 导出Excel成功,使用Blob对象创建一个URL并下载Excel文件 let url = URL.createObjectURL(new Blob([response.data])); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', 'example.xls'); document.body.appendChild(link); link.click(); }) .catch(error => { // 导出Excel失败,展示错误信息 console.error(error.response.data); alert('导出Excel失败'); }); ``` 这样就可以实现导出Excel成功返回Blob,失败返回指定报错信息的功能了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值