色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue axios下載流

江奕云2年前7瀏覽0評論

在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帶來的便利。在實際開發中,可以根據項目需要適當進行封裝,提供更加優質的下載服務。

上一篇datax3.json