导出文件类型为responseType:blob的问题

最新推荐文章于 2025-04-15 15:59:48 发布

念屿北诗°

最新推荐文章于 2025-04-15 15:59:48 发布

阅读量2.5k

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43123717/article/details/116125289

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种处理文件打印接口中出现的异常情况的方法。具体来说，针对后端在文件导出失败时返回JSON，而前端设置为接收blob类型数据的情况，文章提供了详细的解决方案，包括如何判断响应类型并进行相应的数据处理。

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

问题描述：
文件打印接口成功导出文件流，失败返回json,失败时后端返回为json,前端打印响应值为文件流（导出文件类型responseType:blob）的问题。

前端无法解析json

当后端正常导出文件的时候，后端的响应类型是

response.setContentType("application/octet-stream");

或者其他，但是文件导出失败时,返回的类型是json

respons.setContentType("application/json")

这时候前端axios设置了blob时,那到的数据就是blob而不是json,是无法正常解析的。而要通过json转换的形式进行解析。

axios.post(url,data,responseType:blob).then(res=>{
	let data=res.data;	
	//先判断类型,如果是json就进行转换，输出后端的msg
	if(data.type=="application/json"){
		const reader=new FileReader();
		reader.οnlοad=function(){
		const result = JSON.parse(reader.result);
		//处理错误
		console.log(result)
		};
		reader.readAsText(data); 
	
		// 以下为官方的 FileReader.readAsText()的解释：
		// readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
		// 这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回undefined
        // 也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果
        // 当转化完成后， readyState 这个参数就会转换 为 done 即完成态， event("loadend") 挂载的事件会被触发，并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果
		
	}else{
		//直接导出下载
	  const fileName=res.headers["content-disposition"].split(";").split("fileName=")[1];
	  let url=window.URL.createObjectURL(data);
	  var a =document.createElement('a');
	  document.body.appendChild(a);
	  a.href=url;
	  a.download=fileName;
	  a.click();
	  window.URL.revokeObjectURL(url);
	}
})