在前端開發中,經常需要下載文件以供用戶操作。Vue框架提供了方便的方法來實現文件下載功能,下面我們將介紹如何利用Vue實現文件下載。
downloadFile(data, fileName) {
const blob = new Blob([data])
const downloadEl = document.createElement('a')
const href = window.URL.createObjectURL(blob)
downloadEl.href = href
downloadEl.download = fileName
document.body.appendChild(downloadEl)
downloadEl.click()
window.URL.revokeObjectURL(href)
document.body.removeChild(downloadEl)
}
這個方法首先接收兩個參數data和fileName。data是返回的數據,fileName是下載的文件名。接下來我們創建一個Blob對象,Blob是一個可以表示任意數據大小并為其生成一個可訪問和全局唯一的URI的原始數據Blob對象類型。
我們創建了一個downloadEl元素,然后將href設置為a標簽的Url屬性值,downloadEl元素的download屬性被指定為要下載的文件名稱。這里我們將創建的a元素附加到文檔的body元素中,觸發“click”的事件,然后從URL導航操作中釋放href資源,并將下載元素從文檔中刪除。
在Vue組件中我們可以使用上述方法來實現文件的下載。我們在Vue組件中聲明一個方法,然后在需要下載文件的地方調用這個方法,傳遞相應的data和fileName參數即可。
download() {
axios.get('/api/downloadFile', {
responseType: 'blob'
})
.then(res =>{
const data = res.data
const fileName = 'test.txt'
this.downloadFile(data, fileName)
})
}
這個方法使用axios來從服務器獲取文件的二進制數據,axios獲取到的數據以Blob的形式返回。然后我們將獲取到的data和指定的fileName作為參數傳遞給downloadFile方法來下載文件。
至此,我們就實現了Vue的文件下載方法。這個方法使用了Blob類和a標簽的download屬性來實現下載功能。