前端接收type：“applicationoctet-stream“格式的数据并下载，解决。。。
前端接收 type: “application/octet-stream“ 格式的数据并下载，还有后端既返回octet-stream还返回JSON数据时的处理⽅法
今天些项⽬的时候，后端改了⼀下⽂件下载的⽅式，打算⽤接⼝返回 type: “application/octet-stream“格式的数据，然后前端来处理下载。今天也是第⼀次⽤这种⽅法，查询了⽹上的内容总结了⼀下。
第⼀步
在 响应中作出初步的判断
这⾥判断if是针对这种情况时做出的应对⽅法，可能还有其他情况，这⾥只是最简单的。
sponse.use(
response =>{
// 导出
const headers = response.headers
if(headers['content-type']==='application/octet-stream;charset=utf-8'){
return response.data
}
...//这⾥时其他的情况
},
error =>{
ject(error)
}
)
第⼆步
对api进⾏修改
这是我的axios的写法，按各⾃的⾛就⾏
第三步
发起请求，对请求到的数据进⾏处理下载
exportClick(){
export().then(res =>{
const content = res
const blob =new Blob([content])
const fileName ='导出信息.xlsx'
if('download'ateElement('a')){// ⾮IE下载
const elink = ateElement('a')//创建⼀个a标签通过a标签的点击事件区下载⽂件            elink.download = fileName
elink.style.display ='none'
elink.href =ateObjectURL(blob)//使⽤blob创建⼀个指向类型数组的URL
document.body.appendChild(elink)
elink.click()
veChild(elink)
}else{// IE10+下载
navigator.msSaveBlob(blob, fileName)
}
})
}
本来是已经写完这个功能了，但后台告诉我有可能没有⽂件，然后他要给我返回json数据格式我⼜懵了⼀会，⼜查了半天资料，终于是完善好了
当返回的数据类型既有可能是JSON⼜可能是octet-stream时
第⼀步
⾸先我们不能改变原来的代码
这⼀⾏对于接收⽂件是必须的，但是这样⼜会让我们的数据变成blob类型
上⾯是有⽂件时的样⼦
这是没有⽂件的样⼦
可以注意到 blob有 type这个数据，我们就可以根据这个type来判断进⾏下⼀步处理
pe =="application/json"){
...
}
pe =="application/octet-stream"){
...
navigator标签
}
其中是octet-stream类型时的操作我们上⾯就已经写道了
下⾯介绍如何转换为json
第⼆步：将blob转换为json数据
这⾥要先⽤FilerReader，不可以直接使⽤JSON.parse
pe =="application/json"){
// console.log("type == json");
const reader =new FileReader();//通过fileReader将blob类型的数据转换成json格式的数据          adAsText(res,"utf-8");
//读取完成后返回字符串形式的内容
// console.log("sult", sult);
const msg =JSON.sult);
console.log("JSON转换结果", msg);
//...这⾥时对转换后结果的操作
}
};
}
到这⾥下载⽂件的种种问题就解决啦，写个博客纪念⼀下，第⼀次处理这种问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。