post方法下载文件
下载文件,一般后台返回的是文件流。前台如果用的fetch的话,respose里面是空的,什么也看不到。用的axios的话,是一堆字符串形式的东西。
封装请求方法的时候,用 response.headers.get('Content-Type').includes('application/json') 来判断返回结果是不是文件流, 为true的话就不是文件流.
文件的名称要从header里面去取(跨域的时候是取不到的,需要挂nginx)
// 这个是封装请求时获取文件名称的方法
.then((respose) => {
let filename = '';
const disposition = response.headers.get('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
const matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = decodeURIComponent(matches[1].replace(/['"]/g, ''));
}
const res = {
data: response.blob(),
filename,
};
return res;
})
// 这个是接口成功之后的操作,需要注意的是,如果接口失败,返回的一定是json字符串,这里要做判断
callback: ((res) => {
Promise.resolve(res.data)
.then((blob) => {
this.postDownload(blob, res.filename);
});
})
postDownload = (blob, filename) => {
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE
window.navigator.msSaveBlob(blob, filename);
} else {
const URL = window.URL || window.webkitURL;
const downloadUrl = URL.createObjectURL(blob);
if (filename) {
// use HTML5 a[download] attribute to specify filename
const a = document.createElement('a');
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location = downloadUrl;
} else {
a.href = downloadUrl;
a.target = '_blank';
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location = downloadUrl;
}
setTimeout(() => { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
}
},