js實現下載(文件流式)方法詳解與完整實例源碼

Posted on by

在介紹JS文件流式下載文件方法之前，先記錄下window.location.href的使用方法

window.location.href的用法

javascript中的location.href有很多種用法，主要如下。

self.location.href="/url"//當前頁面打開URL頁面
location.href="/url"//當前頁面打開URL頁面
windows.location.href="/url" //當前頁面打開URL頁面，前面三個用法相同。
this.location.href="/url" //當前頁面打開URL頁面
parent.location.href="/url" // 在父頁面打開新頁面
top.location.href="/url" //在頂層頁面打開新頁面

如果頁面中自定義瞭frame，那麼可將parent self top換為自定義frame的名稱,效果是在frame窗口打開url地址

此外，window.location.href=window.location.href;和window.location.Reload()和都是刷新當前頁面。區別在於是否有提交數據。

當有提交數據時，window.location.Reload()會提示是否提交，window.location.href=window.location.href;則是向指定的url提交數據

JS文件流式下載文件源碼實例

下面是使用axios寫的一個完整JS文件流式下載文件的完整源碼

const apiurl = '' // 接口地址
this.exportLoading = true
axios.post(apiurl, params, {
   'responseType': 'blob'  //設置響應的數據類型為一個包含二進制數據的 Blob 對象，必須設置！！！
}).then( (response) =>{
    console.log('response', response, response.data.size)
    this.exportLoading = false
    if(response.data){
        if(response.data.size < 1000){
        	// 根據文件流的大小判斷異常情況
            if(response.data.size == 63){
                this.$message.warning('查無結果');
                return
            }
            if(response.data.size == 84){
                this.$message.warning('導出數據超出最大限制值');
                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); //生成一個Blob URL
            document.body.appendChild(linkNode);
            linkNode.click();  //模擬在按鈕上的一次鼠標單擊
            URL.revokeObjectURL(linkNode.href); // 釋放URL 對象
            document.body.removeChild(linkNode);
        }
    }
}).catch( (error) =>{
    console.log(error);
    this.exportLoading = false
});

推薦閱讀：