今天遇到一个坑,前端带参数向后台发送请求,后台根据参数返回一个文件,这个文件是二进制格式,根据调研得知,最好是使用原生对象XHRHttpRequest来下载文件,避免出现文件解压失败的情况,好了,然后就去网上找相关代码来实现,先贴上一个实验通过的代码.
// A code block
const val={}
const address = `xxx`;
const data = JSON.stringify(val);
const oAjax = new XMLHttpRequest();
oAjax.responseType = 'blob'
oAjax.open('POST', address, true);
oAjax.setRequestHeader("Content-type", "application/json;charset=UTF-8");
oAjax.onreadystatechange = () =>{
if (oAjax.readyState === 4 && oAjax.status === 200) {
const type = oAjax.getResponseHeader('Content-Type')
const blob = new Blob([oAjax.response], {type})
const fileName = oAjax.getResponseHeader('Content-Disposition').split('filename=')[1];
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, fileName)
} else {
const URL = window.URL || window.webkitURL
const objectUrl = URL.createObjectURL(blob)
if (fileName) {
const a = document.createElement('a')
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location = objectUrl
} else {
a.href = objectUrl
a.download = fileName
document.body.appendChild(a)
a.click()
a.remove()
}
} else {
window.location = objectUrl
}
}
}
};
oAjax.send(data);
这里说一下几个强调的点:
- data = JSON.stringify(val) 参数需要先转换一下格式,要不然后台会报400-格式错误
- oAjax.responseType = ‘blob’ 如果后台返回的是一个二进制流,那么就一定要写上这个返回格式,
response: Blob(11295) {size: 11295, type: “application/octet-stream”}
responseType: “blob”
responseURL: “xxx”
可以看下console.log(oAjax),这里response必须是正确的格式,如果response返回的内容是乱码,那么会导致文件解析出错,文件可能会打不开或者解压出错 - 第三点和第二点相关 oAjax.open(‘POST’, address, true); 这一句代码中的第三个参数,必须要写true,不然会导致第二点出错
- 第四个点,有点无关紧要,就是以上代码使用的时候必须全部复制,不能只截取部分,不然会出错
参考链接:
https://blog.csdn.net/qq_32247819/article/details/79270788
https://blog.csdn.net/aydongzhiping/article/details/82462473