记导出文件类型responseType:blob的坑
前端无法解析json当后端文件导出失败时,返回的类型是jsonrespons.setContentType("application/json")这时候前端axios设置了blob时,那到的数据就是blob而不是json,是无法正常解析的。而要通过json转换的形式进行解析。前端代码axios.post(url,data.responseType:blob).then(res=>{let d
·
前端无法解析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 。(提出问题就解决提出问题的人)
更多推荐
所有评论(0)