一、實現(xiàn)效果

二、實現(xiàn)方式

方案：使用axios方法onDownloadProgress方法監(jiān)聽下載進度
使用此方式的前提！?。≌堊尯蠖嗽陧憫?yīng)頭中加上content-length，存放下載文件的總大小，如下圖：

三、代碼

1、進度條頁面代碼如下：

 <Spin fix v-if="spinVisible">
     <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
     <div>正在下載代碼，請稍后...</div>
     <el-progress :percentage="percentComplete"></el-progress>
 </Spin>
 ps:我的進度條是在iview組件spin加載頁里的，若你不需要，可只粘貼el-progress組件部分

2、點擊下載按鈕的js方法邏輯部分
在Axios中，onDownloadProgress是一個回調(diào)函數(shù)，它作為參數(shù)傳遞給axios方法。當(dāng)axios開始接收響應(yīng)數(shù)據(jù)時，會定期觸發(fā)該回調(diào)函數(shù)，以提供下載進度信息。

onDownloadProgress回調(diào)函數(shù)的參數(shù)包含以下信息：

• lengthComputable：一個布爾值，指示是否可以根據(jù)已接收的字節(jié)數(shù)和總字節(jié)數(shù)計算出下載進度百分比。
• loaded：一個表示已接收字節(jié)數(shù)的整數(shù)，表示當(dāng)前已下載的字節(jié)數(shù)。
• total：一個表示總字節(jié)數(shù)的整數(shù)，表示要下載的文件的總字節(jié)數(shù)。如果lengthComputable為false，那么total的值將為0。

// 點擊下載代碼的方法
 downloadCode(id) {
      // 定義全局變量percentComplete 為下載進度值（定義data此處忽略）
     this.percentComplete = 0
     // axios調(diào)用下載接口,timeout可刪掉，我這里是因為文件太大想延長請求時間
     axios({method: 'post',url: ‘xxxx’,data: xxx, 
        headers: { 'Authorization': Cookies.get('token') }, responseType: 'blob', timeout: 600000,                         
        // withCredentials: true,可配可不配，根據(jù)項目實際情況選擇
        // 使用此方法監(jiān)聽
         onDownloadProgress:  (e) => {
             console.log('e:',e);
             // e是一個包含下載進度信息的事件對象，其中包括loaded 、total屬性：
             this.percentComplete = Math.floor((e.loaded / e.total) * 100)
         } })
         .then((res) => {
             const blob = new Blob([res.data], {type: 'application/octet-stream'}); //處理文檔流
             const fileName = res.headers['content-disposition'].split('filename=')[1];
             const elink = document.createElement("a");
             elink.download = fileName;
             elink.style.display = "none";
             elink.href = URL.createObjectURL(blob);
             document.body.appendChild(elink);
             elink.click();
             URL.revokeObjectURL(elink.href); // 釋放URL 對象
             document.body.removeChild(elink);
         }).finally(() => {
             this.spinVisible = false
         });
 },

以上，便可以實現(xiàn)一個下載進度條監(jiān)聽的功能，
其實還是踩了很多坑的，什么XHR等等，經(jīng)過實驗，以上方法就可以簡便實現(xiàn)功能。
希望能幫助到你~文章來源地址http://www.zghlxwxcb.cn/news/detail-754033.html

到了這里，關(guān)于vue+axios+el-progress(elementUI組件)實現(xiàn)下載進度條實時監(jiān)聽（小白簡潔版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！