Vue3 + Spring Boot 文件下载异常错误友好提示处理
问题描述
在进行文件下载功能开发时,当前端请求后端接口返回业务异常(如模板文件不存在)时,前端仅显示通用的'文件下载失败'提示,无法展示具体的业务错误信息(如'模板文件不存在')。
原因分析
- 前端响应类型:前端 Axios 请求设置了
responseType: 'blob',导致后端返回的 JSON 格式错误信息被当作二进制流处理。 - 后端返回类型冲突:Controller 方法返回类型为
ResponseEntity<Resource>,成功时返回文件流,但异常时若直接返回 JSON 对象会导致类型不匹配或前端无法正确解析。 - 编码问题:错误文件响应未明确指定 UTF-8 字符集,导致中文乱码。
解决方案
1. 后端优化:全局异常处理器
使用 @RestControllerAdvice 统一处理异常。针对文件下载请求和普通请求返回不同格式的响应,确保错误信息可被前端识别。
GlobalExceptionHandler.java
@RestControllerAdvice
@Slf4j
public class GlobalExceptionHandler {
@ExceptionHandler(TemplateNotFoundException.class)
public Object handleTemplateNotFoundException(TemplateNotFoundException e, HttpServletRequest request) {
log.error("模板文件不存在:{}", e.getMessage(), e);
if (ErrorFileResponseUtils.isFileDownloadRequest(request)) {
return ErrorFileResponseUtils.createJsonErrorResponse("模板文件不存在", HttpStatus.NOT_FOUND);
}
return Result.error("模板文件不存在");
}
@ExceptionHandler(ResourceNotFoundException.class)
public Object handleResourceNotFoundException(ResourceNotFoundException e, HttpServletRequest request) {
log.error("资源文件不存在:{}", e.getMessage(), e);
if (ErrorFileResponseUtils.isFileDownloadRequest(request)) {
return ErrorFileResponseUtils.createJsonErrorResponse("文件不存在", HttpStatus.NOT_FOUND);
}
Result.error();
}
Object {
log.error(, e.getMessage(), e);
(ErrorFileResponseUtils.isFileDownloadRequest(request)) {
ErrorFileResponseUtils.createJsonErrorResponse(, HttpStatus.INTERNAL_SERVER_ERROR);
}
Result.error();
}
}

