概述: 大部分情況下屡拨,我們是直接訪問提供的download鏈接來直接下載文件只酥。但某些時候褥实,為了保證信息安全,可能需要提交token來驗證用戶信息裂允。
參考:js要怎么接收后端傳的excel文件流损离?中jello chen的回答
在jello chen的回答中,提供了兩種方法绝编。
第一種是通過的a標(biāo)簽直接下載:
<a href="<你的返回流的Action路徑>" >下載</a>
轉(zhuǎn)化為js代碼:
let elink = document.createElement('a');
elink.download = "download.xls";
elink.href = `${url}?token=${token}&${hash}`;
elink.click();
第二種方法是通過XMLHttpRequest來實現(xiàn)的僻澎,代碼如下(有部分修改):
<script type="text/javascript">
function download(filename) {
let oReq = new XMLHttpRequest();
oReq.open("GET", "<你的返回流的Action路徑>", true);
oReq.responseType = "blob";
// 設(shè)置驗證密匙
oReq.setRequestHeader("token",token);
oReq.setRequestHeader("loginName",localStorage.getItem('username') || '');
oReq.onload = function () {
var content = oReq.response;
var blob = new Blob([content]);
// 創(chuàng)建a標(biāo)簽,下載處理過的文件流
var elink = document.createElement('a');
elink.download = filename;
elink.href = URL.createObjectURL(blob);
elink.click();
};
oReq.send();
}
</script>
然后將起轉(zhuǎn)化為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的請求。