js實(shí)現(xiàn)下載(文件流式)方法詳解與完整實(shí)例源碼
在介紹JS文件流式下載文件方法之前,先記錄下window.location.href的使用方法
window.location.href的用法
javascript中的location.href有很多種用法,主要如下。
self.location.href="/url"http://當(dāng)前頁(yè)面打開(kāi)URL頁(yè)面 location.href="/url"http://當(dāng)前頁(yè)面打開(kāi)URL頁(yè)面 windows.location.href="/url" //當(dāng)前頁(yè)面打開(kāi)URL頁(yè)面,前面三個(gè)用法相同。 this.location.href="/url" //當(dāng)前頁(yè)面打開(kāi)URL頁(yè)面 parent.location.href="/url" // 在父頁(yè)面打開(kāi)新頁(yè)面 top.location.href="/url" //在頂層頁(yè)面打開(kāi)新頁(yè)面
如果頁(yè)面中自定義了frame,那么可將parent self top換為自定義frame的名稱,效果是在frame窗口打開(kāi)url地址
此外,window.location.href=window.location.href;和window.location.Reload()和都是刷新當(dāng)前頁(yè)面。區(qū)別在于是否有提交數(shù)據(jù)。
當(dāng)有提交數(shù)據(jù)時(shí),window.location.Reload()會(huì)提示是否提交,window.location.href=window.location.href;則是向指定的url提交數(shù)據(jù)
JS文件流式下載文件源碼實(shí)例
下面是使用axios寫(xiě)的一個(gè)完整JS文件流式下載文件的完整源碼
const apiurl = '' // 接口地址
this.exportLoading = true
axios.post(apiurl, params, {
'responseType': 'blob' //設(shè)置響應(yīng)的數(shù)據(jù)類型為一個(gè)包含二進(jìn)制數(shù)據(jù)的 Blob 對(duì)象,必須設(shè)置?。?!
}).then( (response) =>{
console.log('response', response, response.data.size)
this.exportLoading = false
if(response.data){
if(response.data.size < 1000){
// 根據(jù)文件流的大小判斷異常情況
if(response.data.size == 63){
this.$message.warning('查無(wú)結(jié)果');
return
}
if(response.data.size == 84){
this.$message.warning('導(dǎo)出數(shù)據(jù)超出最大限制值');
return
}
}else{
const blob = new Blob([response.data],{type: 'application/vnd.ms-excel'})
const linkNode = document.createElement('a');
linkNode.style.display = 'none';
linkNode.href = URL.createObjectURL(blob); //生成一個(gè)Blob URL
document.body.appendChild(linkNode);
linkNode.click(); //模擬在按鈕上的一次鼠標(biāo)單擊
URL.revokeObjectURL(linkNode.href); // 釋放URL 對(duì)象
document.body.removeChild(linkNode);
}
}
}).catch( (error) =>{
console.log(error);
this.exportLoading = false
});- js實(shí)現(xiàn)文件流式下載文件方法詳解及完整代碼
- JavaScript進(jìn)階之前端文件上傳和下載示例詳解
- javascript實(shí)現(xiàn)生成并下載txt文件方式
- javascript Blob對(duì)象實(shí)現(xiàn)文件下載
- JavaScript 中如何實(shí)現(xiàn)大文件并行下載
- JavaScript實(shí)現(xiàn)多文件下載方法解析
- javascript使用Blob對(duì)象實(shí)現(xiàn)的下載文件操作示例
- JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例
- 使用 JavaScript 創(chuàng)建并下載文件(模擬點(diǎn)擊)
相關(guān)文章
JS設(shè)置隨機(jī)出現(xiàn)2個(gè)數(shù)字的實(shí)例代碼
這篇文章給大家分享基于js設(shè)置隨機(jī)出現(xiàn)2個(gè)數(shù)字的實(shí)例代碼,在文章下面給分享js產(chǎn)生隨機(jī)數(shù)的幾個(gè)用法介紹,感興趣的朋友一起看看吧2017-07-07
JavaScript編寫(xiě)簡(jiǎn)單的計(jì)算器
這篇文章主要介紹了JavaScript如何編寫(xiě)簡(jiǎn)單的計(jì)算器,功能很簡(jiǎn)單,可以實(shí)現(xiàn)加減乘除功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-11-11
js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼,通過(guò)JavaScript定時(shí)函數(shù)遞歸調(diào)用實(shí)現(xiàn)折疊菜單的緩沖效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JS代碼屏蔽F12,右鍵,粘貼,復(fù)制,剪切,選中,操作實(shí)例
在本篇文章里小編給大家分享的是關(guān)于利用JS代碼屏蔽F12,右鍵,粘貼,復(fù)制,剪切,選中,操作,需要的朋友們學(xué)習(xí)下。2019-09-09
JavaScript與Div對(duì)層定位和移動(dòng)獲得坐標(biāo)的實(shí)現(xiàn)代碼
JavaScript與Div對(duì)層定位和移動(dòng)獲得坐標(biāo)的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-09-09
uniapp uni-swipe-action 滑動(dòng)操作狀態(tài)恢復(fù)功能實(shí)現(xiàn)
按照uni-app官方文檔的寫(xiě)法,當(dāng)前一條滑動(dòng)確認(rèn)之后頁(yè)面列表刷新但是滑動(dòng)的狀態(tài)還在,我們需要在滑動(dòng)確認(rèn)之后 頁(yè)面刷新 滑動(dòng)狀態(tài)恢復(fù),下面小編給大家分享uniapp uni-swipe-action 滑動(dòng)操作狀態(tài)恢復(fù)功能實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-06-06

