前言
js 下载流文件，如果可以下载后端返回流，如果有异常接口返回json，根据错误码友好提示用户，目前只能下载zip，以后持续更新。
使用如下
虽然接口要求传入的参数是FormData，使用的时候满屏幕的append也是不优雅的，直接传入json对象，在封装文件里边解析转换。
const _params = {
value1: xxx,
value2: xxxx,
};
download('api/download', _params)
.then(() => {
// 正常下载
})
.catch(() => [
// 异常情况，包括接口返回错误码
]);
封装如下
url是接口地址
params是传入的参数
1、我们需要将params转换成FormData。
2、请求接口
3、responseType固定为blob
4、使用FileReader将blob转换成json，如果转换失败则返回的是流，转换成功说明接口返回错误码，将错误信息提示即可。
export const download = (url, params) => {
return new Promise((resolve, reject) => {
// 参数有问题直接抛出异常
if (!url || !params) {
reject();
}
const _tmpArr = Object.keys(params) || [];
const _formData = new FormData();
_tmpArr.map(value => {
_formData.append(value, params[value]);
});
let xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status === 200) {
// 将blob对象转换成json对象，当不能下载接口返回的不是流的时候可以转换成功
const reader = new FileReader();
reader.onload = event => {
try {
const _data = JSON.parse(event.target.result);
if (_data && _data.code) {
if (_data.code !== '000000') {
message.error(_data.msg);
// 接口返回不能下载，返回失败，可以在失败中做某些未知的处理
reject();
}
}
} catch (error) {
// 接口返回对象是blob，不能被转换成json，正常下载文件
const blob = this.response;
const filename = `${Date.now()}.zip`;
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const a = document.createElement('a');
const link = window.URL.createObjectURL(blob);
a.href = link;
a.download = filename;
a.click();
window.URL.revokeObjectURL(link);
}
}
};
reader.readAsText(this.response);
}
resolve();
};
xhr.send(_formData);
});
};
