前端处理 application/octet-stream 下载及混合响应解析方案
本文介绍前端如何接收 application/octet-stream 格式的数据并实现文件下载,重点解决后端同时返回文件流与 JSON 数据的混合场景。通过 Axios 响应拦截器判断 Content-Type,利用 Blob 对象的 type 属性区分响应类型,并结合 FileReader 将 Blob 转换为 JSON 格式,从而统一处理文件下载与错误信息返回。
本文主要探讨前端如何接收类型为 application/octet-stream 的数据并完成下载操作,同时提供后端在返回 octet-stream 文件流与 JSON 数据之间切换时的处理策略。
在近期项目开发中,后端调整了文件下载接口,改为返回 type: “application/octet-stream“ 格式的数据,由前端负责触发下载。这是首次采用该方案,通过查阅相关资料并实践,总结出以下处理流程。
第一步:响应拦截器初步判断
在 Axios 的响应拦截器中,首先对响应头进行初步判断。

此处的判断逻辑针对特定场景,可能还存在其他情况,此处仅展示最基础的实现方式。
service.interceptors.response.use(
response => {
// 导出
const headers = response.headers
if (headers['content-type'] === 'application/octet-stream;charset=utf-8') {
return response.data
}
...//这里时其他的情况
},
error => {
return Promise.reject(error)
}
)第二步:修改 API 配置
需要对发起请求的 API 配置进行调整。

此处展示基于 Axios 的写法,开发者可根据实际项目结构自行调整。
第三步:发起请求与下载处理
在发起请求后,需对返回的数据进行处理以触发下载。



exportClick () {
export().then(res => {
const content = res
const blob = new Blob([content])
const fileName = '导出信息.xlsx'
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')//创建一个a标签通过a标签的点击事件区下载文件
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)//使用blob创建一个指向类型数组的URL
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
}
})
}功能初步完成后,后端告知可能存在无文件的情况,此时将返回 JSON 格式数据,因此需要进一步完善逻辑。
经过短暂排查与资料查阅,最终完善了该功能。
当返回数据类型既可能是 JSON 又可能是 octet-stream 时的处理方案
第一步:保持原有代码结构
首先,不应直接修改原有的核心代码逻辑。

接收文件时必须保留相关配置,但这会导致数据被转换为 Blob 类型。

下图展示了有文件返回时的响应结构。

下图展示了无文件(返回 JSON)时的响应结构。
可以观察到 Blob 对象中包含 type 属性,我们可以依据该属性值来区分响应类型并执行后续操作。
if (res.type == "application/json") {
...
}
if (res.type == "application/octet-stream"){
...
} 对于 octet-stream 类型的处理,前文已介绍。下文将详细说明如何将其转换为 JSON 数据。
第二步:将 Blob 转换为 JSON 数据

此处必须使用 FileReader,不能直接使用 JSON.parse 解析 Blob 对象。
if (res.type == "application/json") {
// console.log("type == json");
const reader = new FileReader(); //通过fileReader将blob类型的数据转换成json格式的数据
reader.readAsText(res, "utf-8");
reader.onload = function () {
//读取完成后返回字符串形式的内容
// console.log("reader.result", reader.result);
const msg = JSON.parse(reader.result);
console.log("JSON转换结果", msg);
//...这里时对转换后结果的操作
}
};
}至此,文件下载及混合响应处理的问题均已解决。记录此过程以纪念首次处理此类问题的经验。
转载说明:
借鉴原作者:https://blog.csdn.net/u010598111/article/details/85052865
到此关于前端接收 application/octet-stream 格式数据并下载、解决后端返回类型不唯一问题的介绍结束。更多相关内容可搜索本站历史文章或继续浏览后续文章,感谢支持。
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办?常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js,怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26
