vue項目下載文件重命名監(jiān)測進度demo
更新時間:2023年10月26日 10:49:04 作者:張旭超
這篇文章主要為大家介紹了vue項目下載文件重命名監(jiān)測進度demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
摘要
當后臺返回一個文件地址給前端,需要前端下載并重命名,展示下載進度。
使用技術:ajax、blob、vue插件file-saver
插件
我們不做過多解釋,我們這里只是使用,這是插件教程地址:http://vuejscomponent.com/pac...
項目代碼
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' // 當請求被發(fā)送到服務器時,我們需要執(zhí)行一些基于響應的任務。 // 每當 readyState 改變時,就會觸發(fā) onreadystatechange 事件。 // onreadystatechange存儲函數(shù)(或函數(shù)名),每當 readyState 屬性改變時,就會調用該函數(shù)。 // readyState // 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。 // 0: 請求未初始化 // 1: 服務器連接已建立 // 2: 請求已接收 // 3: 請求處理中 // 4: 請求已完成,且響應已就緒 // 用true時,表示發(fā)送異步請求,請規(guī)定在響應處于 onreadystatechange 事件中的就緒狀態(tài)時執(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項目下載文件重命名監(jiān)測進度demo的詳細內容,更多關于vue文件下載進度檢測的資料請關注腳本之家其它相關文章!
相關文章
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借價值,需要的朋友參考下吧2024-03-03vue使用echarts實現(xiàn)動態(tài)數(shù)據(jù)的示例詳解
這篇文章主要為大家詳細介紹了vue如何使用echarts實現(xiàn)動態(tài)數(shù)據(jù),文中的示例講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11element中datepicker日期選擇器選擇周一到周日并實現(xiàn)上一周和下一周的方法
最近項目中需要用到日期選擇器,所以這里給大家總結下,這篇文章主要給大家介紹了關于element中datepicker日期選擇器選擇周一到周日并實現(xiàn)上一周和下一周的相關資料,需要的朋友可以參考下2023-09-09