记录一个在开发过程中遇到过的问题：Blob 类型转成JSON

最新推荐文章于 2025-07-03 14:57:36 发布

原创最新推荐文章于 2025-07-03 14:57:36 发布 · 6.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#BLOB 转 JSON

javascript 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种在前端开发中实现导出Word文件的方法，同时处理了后端返回失败时的逻辑，确保只有在满足导出条件下才进行导出，避免了错误的.JSON文件生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

需要实现点击导出WORD文件功能, 有两种情况

如果符合导出条件，后端直接返回数据流，如下图所示的一堆看不懂的东西：
不满足导出条件，则后端返回JSON，并附上失败原因，前端需要将失败原因展示出来

eg:

{
    "resultCode":-1,
    "resultInfo”:”我是失败原因”,
    "data":null
}

开发过程：

一开始就只考虑返回成功的情况，也就是我们会将返回的数据转成blob格式

不过这会就会有一个明显的错误，就是当返回失败的时候，还是导出了，但是导出的是一个不正确的.JSON文件

解决方法：

主要是用到 FileReader

// 导出方法

export function exportSettleProve(params, errCallback, successCallback) {
    return dispatch => {
        return post(‘请求URL地址’, JSON.stringify(params))
           .then(res => res.blob())
           .then(res => {
               let reader = new FileReader();
	      	// 处理load事件。该事件在读取操作完成时触发
               reader.onload = e => {
		console.log(‘’拿到返回结果,,e.target.result);
		// 此处由于拿到的e.target.result都是string类型的,如果对返回的数据流使用JSON.parse会导致报错  
                   if(e.target.result.indexOf('resultCode') != -1) {
                       if(JSON.parse(e.target.result).resultCode == -1) {
                           errCallback(JSON.parse(e.target.result).resultInfo);
                       }
                   }else {
                        successCallback(res);
                   }
               };
		// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
               reader.readAsText(res);
           })
    }
}