前端接收 type: “application/octet-stream“ 格式的数据并下载,解决后端返回不唯一

前端接收 type: “application/octet-stream“ 格式的数据并下载,还有后端既返回octet-stream还返回JSON数据时的处理方法

今天些项目的时候,后端改了一下文件下载的方式,打算用接口返回 type: “application/octet-stream“格式的数据,然后前端来处理下载。今天也是第一次用这种方法,查询了网上的内容总结了一下。

第一步

响应拦截器中作出初步的判断

image-20220319151205994

这里判断if是针对这种情况时做出的应对方法,可能还有其他情况,这里只是最简单的。

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进行修改

这是我的axios的写法,按各自的走就行

第三步

发起请求,对请求到的数据进行处理下载

image-20220319152503306

   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时

第一步

首先我们不能改变原来的代码

image-20220319164812278

这一行对于接收文件是必须的,但是这样又会让我们的数据变成blob类型
image-20220319164937461

上面是有文件时的样子

image-20220319165249257
这是没有文件的样子

可以注意到 blob有 type这个数据,我们就可以根据这个type来判断进行下一步处理

if (res.type == "application/json") {
    ...
}
if (res.type == "application/octet-stream"){
    ...
}      

其中是octet-stream类型时的操作我们上面就已经写道了
下面介绍如何转换为json

第二步:将blob转换为json数据

image-20220319165703987

这里要先用FilerReader,不可以直接使用JSON.parse

         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?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E6%8E%A5%E6%94%B6application/octet-stream&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-5-85052865.142v2pc_search_result_control_group,143v4control&spm=1018.2226.3001.4187

  • 29
    点赞
  • 80
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
引用\[1\]:在后端改变文件下载方式时,使用了返回类型为"application/octet-stream"的数据,并通过接口返回前端进行下载处理。\[1\]引用\[2\]:在前端处理下载时,可以根据返回数据类型进行判断和处理。例如,如果返回数据类型是"application/json",可以进行相应的处理;如果是"application/octet-stream",可以进行另外的处理。\[2\]引用\[3\]:在代码中,通过判断响应的content-type来确定是否是"application/octet-stream"类型的数据,然后进行相应的操作。\[3\] 问题: data:application/octet-stream;base64, 是什么意思? 回答: "data:application/octet-stream;base64,"是一种数据URL的格式。它表示数据的MIME类型为"application/octet-stream",而后面的"base64,"表示数据是经过Base64编码的。这种格式数据URL可以用于在浏览器中直接展示或下载数据。在前端处理下载时,可以将这种格式数据URL传递给相应的下载方法,以实现文件的下载操作。 #### 引用[.reference_title] - *1* *2* *3* [前端接收 type: “application/octet-stream格式数据下载解决后端返回唯一](https://blog.csdn.net/qq_53145332/article/details/123595850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值