vue項(xiàng)目下載文件重命名監(jiān)測(cè)進(jìn)度demo
摘要
當(dāng)后臺(tái)返回一個(gè)文件地址給前端,需要前端下載并重命名,展示下載進(jìn)度。
使用技術(shù):ajax、blob、vue插件file-saver
插件
我們不做過多解釋,我們這里只是使用,這是插件教程地址:http://vuejscomponent.com/pac...
項(xiàng)目代碼
import FileSaver from 'file-saver'
// URL:文件存放地址,fileName:保存文件名稱,downloadType:保存文件格式
const singleFileDownload = (url, fileName, downloadType) => {
return new Promise((resolve, reject) => {
if (!url || !fileName) {
reject('文件不存在')
return
}
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
// 當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí),我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
// 每當(dāng) readyState 改變時(shí),就會(huì)觸發(fā) onreadystatechange 事件。
// onreadystatechange存儲(chǔ)函數(shù)(或函數(shù)名),每當(dāng) readyState 屬性改變時(shí),就會(huì)調(diào)用該函數(shù)。
// readyState
// 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
// 0: 請(qǐng)求未初始化
// 1: 服務(wù)器連接已建立
// 2: 請(qǐng)求已接收
// 3: 請(qǐng)求處理中
// 4: 請(qǐng)求已完成,且響應(yīng)已就緒
// 用true時(shí),表示發(fā)送異步請(qǐng)求,請(qǐng)規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù):
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 0) {
let file = null
if (downloadType === 'pdf') {
file = new Blob([xhr.response], { type: "application/pdf" });
} else {
file = new Blob([xhr.response], { type: "application/zip" });
}
FileSaver.saveAs(file, fileName)
resolve('下載成功')
} else {
reject(new Error(fileName + '下載失敗'), null)
}
}
}
xhr.addEventListener('progress', (e) => {
// e.total就是文件的總字節(jié) e.loaded就是文件已加載了多少字節(jié)了
// downloadFile.progress = (e.loaded * 1.0 / e.total * 100).toFixed(2) + '%'
// downloadFile.progress = (e.loaded / (1024 * 1024)).toFixed(2) + 'M/' + (e.total / (1024 * 1024)).toFixed(2) + 'M'
})
xhr.send()
})
}以上就是vue項(xiàng)目下載文件重命名監(jiān)測(cè)進(jìn)度demo的詳細(xì)內(nèi)容,更多關(guān)于vue文件下載進(jìn)度檢測(cè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
nuxt實(shí)現(xiàn)封裝axios并且獲取token
這篇文章主要介紹了nuxt實(shí)現(xiàn)封裝axios并且獲取token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+Element實(shí)現(xiàn)表格單元格編輯
這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格單元格編輯,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
為Vue3?組件標(biāo)注?TS?類型實(shí)例詳解
這篇文章主要為大家介紹了為Vue3?組件標(biāo)注?TS?類型實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
基于前端VUE+ElementUI實(shí)現(xiàn)table行上移或下移功能(支持跨頁移動(dòng))
有時(shí)候需要前端實(shí)現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關(guān)于如何基于前端VUE+ElementUI實(shí)現(xiàn)table行上移或下移(支持跨頁移動(dòng))的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07

