平時業務中下載檔案方式常見的有倆種：
第一種，直接訪問伺服器的檔案地址，自動下載檔案；
第二種 ，伺服器返回blob檔案流，再對檔案流進行處理和下載。
一般小檔案適用於第一種下載方案，不佔用過多伺服器資源，而對於體積龐大的檔案，常常使用檔案流的方式進行傳輸，如圖：
檔案流傳輸成功後通過程式碼可以立即發起瀏覽器下載該檔案流：
這種方式也有弊端，在檔案流傳輸過程中，使用者無法感知檔案流的傳輸狀態（進度），會造成一些困擾（無法確定當前下載操作是否已經生效）。針對這種情況，我們可以在頁面顯示檔案流的狀態和傳輸進度，提高頁面互動性和友好性。
接下來是具體實現：
封裝js方法：
/**
* @param {Object} data: {url: 檔案地址, download: 檔名稱}
*/
export function downLoadAll(data) {
let downProgress = {};
let uniSign = new Date().getTime() + ''; // 可能會連續點選下載多個檔案，這裡用時間戳來區分每一次下載的檔案
axios.get(
data.url,
{ responseType: 'blob', headers: { "Content-Type": "application/json; charset=utf-8" },
onDownloadProgress (progress) {
downProgress = Math.round(100 * progress.loaded / progress.total) // progress物件中的loaded表示已經下載的數量，total表示總數量，這裡計算出百分比
store.commit('caseInformation/SET_PROGRESS', {path: uniSign, 'progress': downProgress}) // 將此次下載的檔名和下載進度組成物件再用vuex狀態管理
}}).then( (res)=>{ // 檔案流傳輸完成後，開啟檔案下載
if(data.downLoad){
jsFileDownload(res.data,data.downLoad+'.'+data.url.replace(/.+\./,"")); // jsFileDownLoad是用來下載檔案流的，下載外掛：npm i js-file-download，import引入：import jsFileDownLoad from 'js-file-download'
} else {
jsFileDownload(res.data, data.url.split('/')[data.url.split('/').length-1]);
}
}).catch((e)=>{
this.$message.error('該檔案無法下載')
})
}
store中的caseInfomation.js：
...
const state = {
progressList: [], // 檔案下載進度列表
...
}
const mutations = {
SET_PROGRESS: (state, progressObj)=>{ // 修改進度列表
if(state.progressList.length){ // 如果進度列表存在
if(state.progressList.find(item=>item.path == progressObj.path)){ // 前面說的path時間戳是唯一存在的，所以如果在進度列表中找到當前的進度物件
state.progressList.find(item=>item.path == progressObj.path).progress = progressObj.progress // 改變當前進度物件的progress
}
}else{
state.progressList.push(progressObj) // 當前進度列表為空，沒有下載任務，直接將該進度物件新增到進度陣列內
}
},
DEL_PROGRESS: (state, props) => {
state.progressList.splice(state.progressList.findIndex(item=>item.path == props), 1) // 刪除進度列表中的進度物件
},
...
}
頁面顯示進度彈框程式碼，downLoadNotice.vue：
<template> </template> <script>
import { mapState } from 'vuex' export default {
name: 'downLoadNotice',
computed: {
...mapState({
'progressList': state => state.caseInformation.progressList
})
},
data() {
return {
notify: {} // 用來維護下載檔案進度彈框物件
}
},
watch: { // 監聽進度列表
progressList: {
handler(n) {
let data = JSON.parse(JSON.stringify(n))
data.forEach(item => {
const domList = [...document.getElementsByClassName(item.path)]
if (domList.find(i => i.className == item.path)) { // 如果頁面已經有該進度物件的彈框，則更新它的進度progress
domList.find(i => i.className == item.path).innerHTML = item.progress + '%'
} else {
if (item.progress === null) { // 此處容錯處理，如果後端傳輸檔案流報錯，刪除當前進度物件
this.$store.commit('caseInformation/DEL_PROGRESS', item.path)
return
}// 如果頁面中沒有該進度物件所對應的彈框，頁面新建彈框，並在notify中加入該彈框物件，屬性名為該進度物件的path(上文可知path是唯一的)，屬性值為$notify(element ui中的通知元件)彈框物件
this.notify[item.path] = this.$notify.success({
// title: 'Info',
dangerouslyUseHTMLString: true,
message: `<p style="width: 100px;">正在下載<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // 顯示下載百分比，類名為進度物件的path(便於後面更新進度百分比)
showClose: false,
duration: 0
})
}
console.log(item.progress + '%', '-------------------------->') if (item.progress == 100) { // 如果下載進度到了100%，關閉該彈框，並刪除notify中維護的彈框物件
this.notify[item.path].close()
// delete this.notify[item.path] 上面的close()事件是非同步的，這裡直接刪除會報錯，利用setTimeout，將該操作加入非同步佇列
setTimeout(() => {
delete this.notify[item.path]
}, 1000)
this.$store.commit('caseInformation/DEL_PROGRESS', item.path)// 刪除caseInformation中state的progressList中的進度物件
}
})
},
deep: true
}
}
}
</script> <style scoped> </style>
以上程式碼我們可以封裝到mixins資料夾中，在頁面內用mixins混入：
頁面中觸發下載操作：
downLoad(item){
let downData = {
url: `ipdoc${item.url}`,
downLoad: item.fileName
}
this.$commonUtils.downLoadAll(downData) // 下載
},
最終頁面的效果：
最後注意一點，以上的下載進度並不是真正下載的檔案，而是檔案流，檔案流下載完成後，再通過上文的js-file-download外掛下載真正的檔案！
腳踏實地行，海闊天空飛