在Vue文件中,我們常用Axios來進行http請求,而在下載文件的時候,也可以使用Axios來實現。其中一種方式是直接將下載鏈接賦值給window.location.href,但是這種方式并沒有進行封裝,不能更好的控制下載的流程,而使用Axios可以更好的控制下載流。
下載流的實現需要借助于瀏覽器提供的Blob對象,Blob對象表示一段不可變的,原始的二進制數據。我們可以通過使用XMLHttpRequest對象獲取Blob數據,而Axios對XMLHttpRequest也是有封裝的,簡化了代碼的書寫。可以通過如下代碼來實現下載流:
axios({ url: 'http://xxx.xxx/download', method: 'get', responseType: 'blob', params: { fileName: '文件名' } }).then((response) =>{ const content = response.data const fileName = '文件名' const type = response.headers['content-type'] const blob = new Blob([content], { type: type }) if (typeof window.navigator.msSaveBlob !== 'undefined') { window.navigator.msSaveBlob(blob, fileName) } else { const URL = window.URL || window.webkitURL const objectUrl = URL.createObjectURL(blob) if (fileName) { const a = document.createElement('a') if (typeof a.download !== 'undefined') { a.href = objectUrl a.download = fileName document.body.appendChild(a) a.click() document.body.removeChild(a) } else { location.replace(objectUrl) } } else { location.replace(objectUrl) } } })
首先,我們需要定義請求的接口地址以及請求的方法,并且設置responseType為blob。注意,params參數用于在請求鏈接中傳遞查詢參數。當然,這里也可以使用data參數或者headers參數傳遞相應參數。
接著,Axios會自動將獲取到的二進制文件內容封裝成Blob對象,并且傳遞給.then()方法中的回調函數。在回調函數中,我們可以對Blob對象進行操作。首先,我們需要獲取到文件的類型,在這里我們使用了response.headers[‘content-type’]屬性來獲取,注意這個屬性可能會因為響應頭中的配置而有所不同。
然后,我們需要判斷當前瀏覽器是否支持window.navigator.msSaveBlob方法,因為在IE瀏覽器中,無法直接通過a標簽的download屬性來下載文件。如果支持該方法,則使用該方法下載文件;否則,我們需要判斷當前瀏覽器是否支持a標簽的download屬性,如果支持,則使用該屬性來下載文件;否則,我們需要使用location.replace方法來下載文件。
最后,需要注意,在使用完Blob對象之后,我們需要使用URL.revokeObjectURL方法來釋放內存,避免內存泄漏。代碼如下:
// 釋放內存 URL.revokeObjectURL(objectUrl)
綜上所述,使用Axios來實現下載流非常方便,不僅可以更好的控制下載流程,還可以享受Axios帶來的便利。在實際開發中,可以根據項目需要適當進行封裝,提供更加優質的下載服務。