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

Vue 专栏收录该内容
2 篇文章 0 订阅

问题描述:
文件打印接口成功导出文件流,失败返回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);
	}
})
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值