快捷導(dǎo)航

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

更新時(shí)間：2022年12月10日 08:51:29 作者：阿晏_

這篇文章主要介紹了js實(shí)現(xiàn)下載(文件流式)的方法,需要的朋友可以參考下

在介紹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
});

您可能感興趣的文章: