之前面試的時候，有遇到一個問題：就是下載大文件的時候，如何得知下載進度，當時的回復是沒有處理過。。。

現在想到了。axios中本身就有一個下載進度的方法，可以直接拿來使用。

下面記錄一下處理步驟：

參考鏈接：https://blog.csdn.net/yyh123456hhh/article/details/131637151

解決步驟1：給封裝好的axios方法中添加onDownloadProgress

這個方法就是監聽接口進度的方法了，可以作為入參進行處理。

解決步驟2：在使用request時，寫入onDownloadProgress

export async function exportPageList(params, config, downloadProgress) {return request(`/api/quality-service/FeedReasons/export-feedreason-datas`,METHOD.GET,params,config,//請求頭或者文檔格式設置等downloadProgress//接口請求進度);
}

解決步驟3：具體使用方法

html部分：

<a-modaltitle="導出":footer="null":visible="visible":width="500":closable="false"><div class="download-progress"><a-progress :percent="percent" /><p>正在導出...</p></div>
</a-modal>

需要傳入的參數：visible percent
是否展示彈窗和進度條占比

exportPageList(params,{responseType: 'blob'},(progress) => {this.visible = true;this.percent = (progress.loaded / progress.total) * 100;if (this.percent >= 100) {setTimeout(() => {this.visible = false;}, 200);}}
)
.then((res) => {let blobUrl = window.URL.createObjectURL(res);let link = document.createElement('a');link.style.display = 'none';link.download = `報廢原因配置_${moment().format('YYYY/MM/DD')}.xlsx`;link.href = blobUrl;document.body.appendChild(link);link.click();document.body.removeChild(link);
})
.finally(() => {this.spinning = false;
});

最終效果如下：