vue項目下載文件重命名監(jiān)測進度demo
摘要
當后臺返回一個文件地址給前端,需要前端下載并重命名,展示下載進度。
使用技術(shù):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 屬性改變時,就會調(diào)用該函數(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的詳細內(nèi)容,更多關(guān)于vue文件下載進度檢測的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02
vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借價值,需要的朋友參考下吧2024-03-03
vue使用echarts實現(xiàn)動態(tài)數(shù)據(jù)的示例詳解
這篇文章主要為大家詳細介紹了vue如何使用echarts實現(xiàn)動態(tài)數(shù)據(jù),文中的示例講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11
element中datepicker日期選擇器選擇周一到周日并實現(xiàn)上一周和下一周的方法
最近項目中需要用到日期選擇器,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于element中datepicker日期選擇器選擇周一到周日并實現(xiàn)上一周和下一周的相關(guān)資料,需要的朋友可以參考下2023-09-09

