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

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

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

第一步

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

这里判断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的写法，按各自的走就行

第三步

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

   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类型

上面是有文件时的样子

这是没有文件的样子

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

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

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

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

这里要先用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-2_allsobaiduweb~default-5-85052865.142^v2pc_search_result_control_group,143^v4control&spm=1018.2226.3001.4187