前端处理 application/octet-stream 下载及混合响应解析方案

作者:资源驿站时间:2026-10-31 09:42:51浏览:425

本文介绍前端如何接收 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 格式数据并下载、解决后端返回类型不唯一问题的介绍结束。更多相关内容可搜索本站历史文章或继续浏览后续文章,感谢支持。

作者最新文章