共计 2307 个字符,预计需要花费 6 分钟才能阅读完成。
通过 axios 发送 POST 申请 下载文件。
这时候的 Content-Type: application/json;charset=UTF-8
先贴
axios({
method: 'post',
url: 'xxx/xxx',
data: {***},
responseType: 'blob', // 这里很重要,如果没有,respons.data 为 '',传了返回的 data 是 Blob 格局。}).then(response => {const disposition = response.headers['content-disposition'];
if (disposition && disposition.indexOf('attachment') !== -1) {postDownload(response.data, '结算单.xls');
}
}).catch((error) => {
// 这里 catch 我没试过,抄的。。也不晓得对不对
if(error.request.responseType === 'blob') {let errInfo = {};
let reader = new FileReader();
reader.readAsText(err.response.data, 'UTF-8');
reader.onload = function () {errInfo = JSON.parse(reader.result);
data.error && data.error.call(this, errInfo)
};
}
else {data.error && data.error.call(this, err.response.data)
}
})
与后盾沟通好 response header 的设置,并规定好 fileName 的编码方式,不便前端拿到后解析
content-disposition: attachment;fileName=%E9%81%A5%E6%84%9F%E8%A7%A3%E8%AF%91%E6%95%B0%E6%8D%AE.xls
content-type: application/octet-stream
我这边的后端也是抄的局部代码 返回的 content-disposition 里的 fileName 他也不晓得是什么编码。。
content-disposition: “attachment;filename=ç»ç®å.xls” 我解析不了 就写死了
这个是 传入(blob, filename)下载的函数,这是从别处抄的
function 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
文件名称:
文件大小:
下载声明:本站部分资源来自于网络收集,若侵犯了你的隐私或版权,请及时联系我们删除有关信息。
下载地址:
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
}
}
表单 post 下载
我感觉更简略。和第一种略有区别,这个我没用过,先贴着,当前用失去。
原理:创立一个暗藏 form 表单,通过 form 表单的提交刷新性能,实现下载。代码如下:
downloadExcel(url, obj) {let tempForm = document.createElement('form');
// var token = window.token || ''
// if (url && token) {// if (url.indexOf('?') !== -1) {
// url = url + '&token=' + token;
// } else {
// url = url + '?token=' + token;
// }
// }
tempForm.action = url;
tempForm.method = 'post';
tempForm.onsubmit = "return false";
tempForm.style.display = 'none';
for (let st in obj) {if (obj.hasOwnProperty(st)) {let opt = document.createElement('textarea');
opt.name = st;
opt.value = obj[st];
tempForm.appendChild(opt);
}
}
document.body.appendChild(tempForm);
tempForm.submit();
return tempForm;
}
这时候的 Content-Type: application/x-www-form-urlencoded; charset=UTF-8
正文完
发表至: javascript
2021-03-08