前端下载接口出错时需手动解析blob响应：先用filereader读取为文本，再json.parse判断code是否非0；拦截器不统一处理，而由调用层根据content-type识别错误json并提示，注意显式指定utf-8编码。
文件下载接口返回错误信息时，前端无法直接通过 response.data 解析 JSON，因为设置了 responseType: 'blob'，浏览器会把所有响应（包括错误）都转成 Blob。这时候必须手动判断响应内容类型，再决定是下载文件还是解析错误。
识别响应是否为错误 JSON
后端在出错时（如“模板文件不存在”）仍返回 Content-Type: application/json，但 Axios 因配置了 responseType: 'blob' 会强制把整个响应体当作二进制处理。所以需检查 Blob 的实际内容：
- 用
FileReader同步读取 Blob 内容为文本 - 尝试
JSON.parse，若成功且含code !== 0，说明是业务错误 - 常见错误结构如
{"code":1,"message":"模板文件不存在"}
修改响应拦截器，支持 Blob 场景下的错误提取
不要在拦截器里统一 return response.data，而要先判断类型：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 如果
response.data instanceof Blob，且response.headers['content-type']?.includes('json')，就走错误解析流程 - 否则，按原逻辑处理正常 JSON 响应
- 注意：不能依赖
response.status，因为 200 状态下后端也可能返回错误 JSON（这是常见设计）
在调用层做二次解析（推荐落地方式）
拦截器保持简洁，把类型判断和错误解析下沉到具体 API 调用处更可控：
- 请求时明确标注该接口可能返回 Blob 或错误 JSON，例如加个
expectsBlob: true标志 - 在
.then()中检查res.data.type：如果是"application/json"，用 FileReader 读取并提示message - 示例代码片段：
if (res.data.type === 'application/json') {
const reader = new FileReader();
reader.onload = () => {
const err = JSON.parse(reader.result as string);
ElMessage.error(err.message || '下载失败');
};
reader.readAsText(res.data);
}
避免常见陷阱
几个容易忽略但关键的点：
- 不要在拦截器里对所有 Blob 响应都
return Promise.reject()，否则正常下载会被中断 - 后端需确保错误响应的
Content-Type是application/json，不能是text/plain或空值 - 中文错误消息需保证 UTF-8 编码，
FileReader.readAsText(blob, 'utf-8')必须显式指定编码 - Element Plus 的
ElMessage不支持换行符渲染，建议用replace(/\n/g, '<br>')
+dangerouslyUseHTMLString: true
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
