第一次对接后端二进制流导出，一脸蒙逼。所以做完赶紧记录一下解决方案。
对接口分析：
- 确认返回的是二进制流;
- 查看返回值【如下】
确认接口无问题：浏览器有时是无法看到二进制码流的，所以可以通过这两个参数确认接口请求已成功
微信图片_20210209105834.png
filename: 文件名；
Content-type: 对应Blob第二个参数type类型
项目使用vue + axios请求
注意： 1. 确认返回值类型【responseType】是‘Blob | ArrayBuffer...’, 如果无法确认， 那不好意思，自己尝试?。?！
axios({
url: '*******',
method: 'GET|POST',
params | data,
responseType: 'ArrayBuffer | Blob' 下面解析方式是一样的
}).then(res => {
const all = res.data;
if (all instanceof ArrayBuffer) { // 是否是arrayBuffer, 如果是Blob等需要其他判断方式
// 文件名
const fileName = res.headers['content-disposition'].match(
/filename=(.*)/
)[1];
// new Blob解析: type 与上图 Content-type 一致
const blob = new Blob([all], { type: 'application/octet-stream' });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
window.navigator.msSaveBlob(blob, decodeURI(fileName));
} else {
if (res.headers['content-type'] === 'APPLICATION/OCTET-STREAM') {
let url = window.URL.createObjectURL(blob);
let down = document.createElement('a');
down.download = fileName;
down.href = `${url}`;
down.style.display = 'none';
// 兼容：某些浏览器不支持HTML5的download属性
if (typeof down.download === 'undefined') {
down.setAttribute('target', '_blank');
}
// 触发点击
document.body.appendChild(down);
down.click();
// 然后移除
document.body.removeChild(down);
// 释放blob URL地址
window.URL.revokeObjectURL(url);
}
}
}
})
