概述: 大部分情况下,我们是直接访问提供的download链接来直接下载文件。但某些时候,为了保证信息安全,可能需要提交token来验证用户信息。
参考:js要怎么接收后端传的excel文件流?中jello chen的回答
在jello chen的回答中,提供了两种方法。
第一种是通过的a标签直接下载:
<a href="<你的返回流的Action路径>" >下载</a>
转化为js代码:
let elink = document.createElement('a');
elink.download = "download.xls";
elink.href = `${url}?token=${token}&${hash}`;
elink.click();
第二种方法是通过XMLHttpRequest来实现的,代码如下(有部分修改):
<script type="text/javascript">
function download(filename) {
let oReq = new XMLHttpRequest();
oReq.open("GET", "<你的返回流的Action路径>", true);
oReq.responseType = "blob";
// 设置验证密匙
oReq.setRequestHeader("token",token);
oReq.setRequestHeader("loginName",localStorage.getItem('username') || '');
oReq.onload = function () {
var content = oReq.response;
var blob = new Blob([content]);
// 创建a标签,下载处理过的文件流
var elink = document.createElement('a');
elink.download = filename;
elink.href = URL.createObjectURL(blob);
elink.click();
};
oReq.send();
}
</script>
然后将起转化为fetch方式:
let newOptions = {
loginName: localStorage.getItem('username') || '',
'Content-Type': 'application/form-data; charset=utf-8',
token,
}
fetch("<你的返回流的Action路径>", newOptions, { responseType: 'blob'})
.then(response => {
// 注意,该处并非response.json()
return response.blob();
})
.then(res => {
var blob = new Blob([res]);
let elink = document.createElement('a');
elink.download = "download.xls";
elink.href = URL.createObjectURL(blob);
elink.click();
})
.catch(e => {
console.log('error:' + e)
})
因为没有post方式的接口,所以没有测试post的请求。