做网站刷QQ会员网站,景观设计论文,茂名seo网站推广,php做的卖水果网站功能说明#xff1a;前端导出excel时#xff0c;后端出现异常#xff0c;比如sql异常#xff0c;或者创建excel时出现的异常#xff0c;希望将这些异常信息返回给前端查看。
框架#xff1a;vue3 axios Springboot
实现难度分析#xff1a;前端导出excel#xff0c…功能说明前端导出excel时后端出现异常比如sql异常或者创建excel时出现的异常希望将这些异常信息返回给前端查看。
框架vue3 axios Springboot
实现难度分析前端导出excelaxios 需要设置responseType“blob”, axios的response监听器需要判断后端返回的是否时blob类型并将整个response返回给axios接口的then()然而后端我们代码如果正常的情况下返回的blob异常情况下返回的异常信息字符串。
实现代码 java层再catch内对response重新定义并且自定义一个状态码
PostMapping(/export)
public void exportFile(RequestBody map, HttpServletResponse response) {try {// todo 导出excel流程代码最后将workbook 写入到response内 如果方法体内调用的自定义函数有try...catch(Exception e)... 需要将异常手动抛到最外层 throw new Exception(e)} catch(Exception e) {// 这里接收所有的异常信息response.setStatus(260); // 定义一个状态码用于前端的判断只能是2开头的其他开头的到不了前端axios响应拦截器方法体内response.setContentType(text/plain); //定义文本类型response.setCharacterEncoding(UTF-8);try (PrintWriter out response.getWriter()){out.print(e.getMessage()); // 将异常信息写入到response内}e.printStackTrace();}
}vue 端判断自定义状态码并做异常信息输出
// 某个导出按钮触发的
const export () {axios({ url: http://xxx/export, responseType: blob, }).then((response){if(response.status 260) {// 接收前端的异常信息由于是blob类型我们需要将blob转文本blobToString (new Blob([response.data],{type: text/plain}) , (text){Message.error(text); // 异常信息文本})}else {// todo 将excel blob流下载到浏览器}});
}const blobToString (blob, callback) { let reader new FileReader(); reader.onload function(event) { let text event.target.result; callback(text); }; reader.onerror function(error) { console.error(Error reading blob as text:, error); }; reader.readAsText(blob);
} axios 响应拦截器
axios.interceptors.response.use((response:AxiosResponseHttpResponse){if(response.config.responseTypearraybuffer || response.config.responseTypeblob || response.data instanceof Blob) {return response; // 文件流} else {//todu 对非文件流请求的统一处理return response.data;}
})