JS接收服务端流文件

本文主要介绍JS如何接受服务端的流文件

JS接收服务端流文件

话不多说,直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

const ExportFile=(url,params)=> {
const serializeRarams=Object.entries(params?params:{}).map(item=>{return `${item[0]}=${item[1]}`}).join("&"); //参数序列化
url=serializeRarams?`${url}?${serializeRarams}`:url //url带参
var xmlResquest = new XMLHttpRequest(); //创建xhr请求
xmlResquest.open("GET", url, true); //设置url
xmlResquest.setRequestHeader("Content-type", "application/json"); //设置请求头
// xmlResquest.timeout =60000; // 超时时间,单位是毫秒
xmlResquest.responseType = "blob"; //该属性必须设置,接受blob流文件
xmlResquest.onload = function (oEvent) {
var content = xmlResquest.response;
if(oEvent.target.status!=200){ //服务器报错
alert("服务器错误");
return
}else if(content.type=="application/json"){ //返回json数据
let fileReader = new FileReader(); //创建FileReader
fileReader.readAsText(content) //解析json数据
fileReader.onload = function (e){

};
}else{
var blob = new Blob([content]); //创建blob对象并接受响应流
if (xmlResquest.getResponseHeader("content-disposition")) {//判断有没有请求头content-disposition,该请求头在后台文件流导出成功时添加
var explorer = navigator.userAgent;
var elink = document.createElement('a');
var fileName = xmlResquest.getResponseHeader("content-disposition").split(";")[1].split("=")[1];//获取文件名
//响应头中的内容如果包含中文会出现乱码,需要解码才能正常显示
if (explorer.indexOf("MSIE") >= 0 || explorer.indexOf("Chrome") >= 0) { //IE和google浏览器
fileName = decodeURIComponent(fileName);
} else {
fileName = decodeURI(escape(fileName));
}
elink.download = fileName; //通过a标签执行浏览器下载功能
elink.style.display = 'none';
elink.href = window.URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
window.URL.revokeObjectURL(url);
} else {//后台出现异常时的处理
var r = new FileReader();
r.readAsText(blob, 'utf-8');
}
}
};
// xmlResquest.onerror = function (e) { xhr错误
// alert("请求出错")
// }
// }xmlResquest.onsuccess = function(e) { //请求成功
// console.log(e)
// }
xmlResquest.send();//发送请求
}
export default ExportFile
扫一扫,请老师喝水