解决前端接收 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
到此这篇关于前端接收 type: “application/octet-stream“ 格式的数据并下载，解决后端返回不唯一的文章就介绍到这了,更多相关接收application/octet-stream格式的数据并下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！