vue項(xiàng)目下載文件重命名監(jiān)測進(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)請求被發(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: 請求未初始化 // 1: 服務(wù)器連接已建立 // 2: 請求已接收 // 3: 請求處理中 // 4: 請求已完成,且響應(yīng)已就緒 // 用true時(shí),表示發(fā)送異步請求,請規(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)測進(jìn)度demo的詳細(xì)內(nèi)容,更多關(guān)于vue文件下載進(jìn)度檢測的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借價(jià)值,需要的朋友參考下吧2024-03-03Vue打包部署到Nginx時(shí),css樣式不生效的解決方式
這篇文章主要介紹了Vue打包部署到Nginx時(shí),css樣式不生效的解決方式,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù),文中的示例講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11element中datepicker日期選擇器選擇周一到周日并實(shí)現(xiàn)上一周和下一周的方法
最近項(xiàng)目中需要用到日期選擇器,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于element中datepicker日期選擇器選擇周一到周日并實(shí)現(xiàn)上一周和下一周的相關(guān)資料,需要的朋友可以參考下2023-09-09