后端返回的Blob是乱码怎么处理
使用以上代码也可以进行下载导出 ,当然我么肯定是需要在封装请求的时候处理这个问题,博主采用的是fetch请求,小伙伴们根据自己情况采用,这里只是提供了一个思路。
·
请求导出接口,返回以下乱码
调用导出接口返回的是这一串乱码
不用质疑这个后端反的是对的,而是请求的时候浏览器没有转换过来。
只需要你在返回结果里面进行截取处理
fetch().then(response=>{
resolve(
checkRequestStatus(
response,
{
isBlob,
checkToken,
}
));
});
// isBlob 判断是否是blob类型,是就给true
// checkToken 判断token是否过期
// 解析请求结果
function checkRequestStatus(
response: any,
initOption: checkRequestType
): Promise<any> {
const {
isBlob,
checkToken,
} = initOption;
if (response.status >= 200 && response.status < 300) {
const responseResult = !!isBlob ? response.blob() : response.json();
return new Promise((resolve) => {
responseResult.then((resp: any) => {
// 未登录或登录已过期
if (resp?.code === 1102) {
RouterExample && RouterExample.push('/');
resolve({
code: 200,
data: null,
});
}
!!isBlob
? resolve({
code: 100,
data: resp,
})
: resolve(resp);
});
});
} else {
// checkToken请求暂时规避此逻辑
if (!checkToken) {
useStorage.removeItem('token');
RouterExample && RouterExample.push('/');
}
return Promise.resolve({
data: null,
code: response.status,
message: response.message || 'error',
});
}
}
以上情况是把乱码转换成了blob类型,转换成blob类型之后进行blob处理,最后就可以下载导出的内容
也可以采用使用单个导出请求配置,采用的是axios
export function exportExcel(url, params = {}) {
return new Promise((resolve, reject) => {
axios({
method: "get",
url: url, // 请求地址
params,
responseType: "blob" // 表明返回服务器返回的数据类型
}).then(
(response) => {
resolve(response);
let fileName = "导出单据" + Date.parse(new Date()) + ".xls";
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(response, fileName);
} else {
let link = document.createElement("a");
link.href = window.URL.createObjectURL(response);
link.download = fileName;
link.click();
// 释放内存
window.URL.revokeObjectURL(link.href);
}
},
(err) => {
reject(err);
}
);
});
}
总结
使用以上代码也可以进行下载导出 ,当然我么肯定是需要在封装请求的时候处理这个问题,博主采用的是fetch请求,小伙伴们根据自己情况采用,这里只是提供了一个思路
更多推荐
所有评论(0)