vue/js實現檔案流下載,檔案下載進度監聽
/**
* 文件下載(通過文件請求,直接下載文件)
* url 請求路徑
* fileName 下載名稱
* size 檔案大小
*/
loadDown (url, fileName, size) {
var _this = this
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true) // 也可以使用POST方式,根據介面
xhr.responseType = 'blob'
xhr.onprogress = function (event) {
// 用於監聽下載進度,需要知道檔案大小
if (event.loaded === size) {
_this.downloadLoading = false
}
}
xhr.onload = function () {
if (this.status === 200) {
var content = this.response
var aTag = document.createElement('a')
var blob = new Blob([content])
aTag.download = fileName
aTag.href = URL.createObjectURL(blob)
aTag.click()
URL.revokeObjectURL(blob)
}
}
xhr.send()
}
/**
*request請求,獲取檔案地址
*/
async handlePreview (file) {
var _this = this
var xhr = new XMLHttpRequest()// 第一步:新建物件
xhr.open('GET', file.url, true)// 第二步:開啟連線 將請求引數寫在url中
xhr.send()// 第三步:傳送請求 將請求引數寫在URL中
/**
* 獲取資料後的處理程式
*/
xhr.onreadystatechange = function (res) {
if (xhr.readyState === 4 && xhr.status === 200) {
var str = xhr.responseText// 獲取到json字串,解析
str = JSON.parse(str)
_this.loadDown(str.d, file.name)
}
}
},
相關文章
- js實現使用檔案流下載csv檔案JS
- flutter使用dio實現 檔案下載並實現進度監聽總結Flutter
- vue專案下載檔案,重新命名,監測進度。Vue
- 檔案流下載檔案,zip/其他格式檔案
- OSS實現檔案下載進度條顯示
- Android 史上最優雅的實現檔案上傳、下載及進度的監聽Android
- js下載檔案的實現方式JS
- js實現txt/excel檔案下載JSExcel
- jQuery監聽檔案上傳實現進度條效果jQuery
- Android OkHttp+RxJava 史上最優雅的實現檔案上傳/下載進度的監聽AndroidHTTPRxJava
- js 檔案下載JS
- jsp下載檔案的實現方法JS
- Flutter實現檔案下載Flutter
- AJAX實現檔案下載----
- Python展示檔案下載進度條Python
- vue實現Excel檔案的上傳與下載VueExcel
- Flutter 實現檔案下載功能Flutter
- Java實現檔案下載功能Java
- Weex 實現檔案的下載
- servlet實現檔案下載demoServlet
- Django 實現下載檔案功能Django
- 利用IhttpHandler實現檔案下載HTTP
- 使用Servlet實現檔案下載Servlet
- Retrofit2.0使用——帶進度下載檔案
- Android檔案下載之進度檢測Android
- Android下載檔案(一)下載進度&斷點續傳Android斷點
- Vue實現點選按鈕進行檔案下載(後端Java)Vue後端Java
- Jsp+Servlet實現檔案上傳下載(一)--檔案上傳JSServlet
- 【CLI】使用 Curl 下載檔案實時進度條顯示
- IDM下載度盤檔案
- .netcore+vue 實現壓縮檔案下載NetCoreVue
- Java程式碼實現下載檔案Java
- vc實現https檔案下載HTTP
- 檔案下載
- 使用Vue+go實現前後端檔案的上傳下載,csv檔案上傳下載可直接照搬VueGo後端
- iis實現點選檔案下載而不是開啟檔案
- javaWeb不生成臨時檔案實現壓縮檔案下載JavaWeb
- Feign實現檔案上傳下載