1、前端处理后端返回的二进制流文件
var xhr = new XMLHttpRequest();
xhr.open("post", "/download/scoreFile", true);
xhr.responseType = "blob"; //重点:设置接收类型
xhr.onload = function() {
if (this.status == 200) {
var url = URL.createObjectURL(this.response);
var a = document.getElementById("a");
if(!a){
a = document.createElement("a");
a.setAttribute("id", "aElem");
document.body.appendChild(a);
}
a.href = url;
a.click();
URL.revokeObjectURL(url)
}
}
xhr.send();
注意:如果后端接口返回的是二进制流数据,在发送请求时需要设置responseType=‘blob’,否则收到的数据将是乱码。
2、前端处理后端返回的二进制流乱码图片
var xhr = new XMLHttpRequest();
xhr.open("get", "/verify", true);
xhr.responseType = "arraybuffer"; //重点:设置接收类型
xhr.onload = function() {
if (this.status == 200) {
let img = document.getElementById("img");
let imgBase = btoa(new Uint8Array(response.data).reduce((data, byte) => data +String.fromCharCode(byte),'')); //将返回数据转为为base64
img.src = 'data:image/jpg|png;base64,' + imgBase
}
}
xhr.send();
拓展
URL.createObjectURL(obj) 方法会创建一个 DOMString,这个 URL 的生命周期和创建它的窗口中的 document 绑定。
语法:URL.createObjectURL(obj)
参数说明:obj为 File 对象、Blob 对象或者 MediaSource 对象。
使用完后,最好调用URL.revokeObjectURL() 释放内存;如果不主动释放内存,浏览器会在页面退出时自动释放。