记导出文件类型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.onload=function(){
		const {msg}= JSON.parse(reader.result);
		//处理错误
		alert(msg)
		};
		reader.readAsText(data);
	}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);
	}
})

后端

  try {
   //正常输出流
   response.setContentType("application/octet-stream");
   //设置下载的文件名
   response.setHeader("Content-Disposition","attachment;fileName="+fileName+".zip");
   //输出流
   BufferedInputStream fis = new BufferedInputStream(new FileInputStream(path));
   byte[] buffer = new byte[fis.available()];
   fis.read(buffer);
   fis.close();
   BufferedOutputStream bos = new  BufferedOutputStream(response.getOutputStream());
   bos.write(buffer);
   bos.flush();
   bos.close();
   //这里要return null 不然会有异常 Could not find acceptable representation 异常
   return null;
   } catch (IOException e) {
     //如果异常
	response.setContentType("application/json");
    return ResponseEntity.status(500).body("异常");
}

如果是正常导出 设置响应的格式为其他即可。
但是又有一个问题。当后端响应格式不是jason的时候会报

Could not find acceptable representation 异常

我的解决方式是抓异常如果没有异常就不返回json,直接返回null，如果有异常就返回json 。（提出问题就解决提出问题的人）