實現(xiàn)能實時了解下載文件進度的方式

這是ajax部分,因為不太了解目前項目里的ajax,所以就自己寫了一個

export function downloadWebProtect (params, config = {}) {

?return new Promise((resolve, reject) => {

? ?try {

? ? ? const xhr = new XMLHttpRequest();

? ? ? xhr.onprogress = config.progress;

? ? ? xhr.open('GET', `${process.env.PROXY_ENV === 'dev' ? '/api' : ''}/${pkg.name}/download.json?${stringify({...params, ctoken: getCtoken() })}`, true);

? ? ? xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

? ? ? xhr.setRequestHeader('Accept', 'application/json');

? ? ? xhr.responseType = "blob"; //接收二進制流數(shù)據(jù)

? ? ?xhr.onreadystatechange = () => {

? ? ? ?if (xhr.readyState === 4) {

? ? ? ? ? if (400 >= xhr.status && xhr.status? >= 200) {

? ? ? ? ? ? resolve(xhr.response);

? ? ? ? ? } else {

? ? ? ? ? ? reject(xhr.responseText)

? ? ? ? ? }

? ? ? ?}

? ? ? }

? ? ? xhr.onerror = (err) => {

? ? ? ? reject(err)

? ? ? }

? ? ? xhr.send();

? ?} catch (e) {

? ? ?console.log(e);

? ? }

? })

}



調(diào)用ajax的函數(shù):

handleConfirmDownload = () => {

? ?const progress = (event) => {

? ? ? const {total, loaded} = event;

? ? ? ?loaded/total; //當前進度

? ? };

? ? downloadWebProtect({}, {?progress }).then((res) => {

? ? ?????const url = window.URL.createObjectURL(res),//將二進制流轉(zhuǎn)為內(nèi)存地址

? ? ? ? ? ? ? ? ? ?a = document.createElement('a');????

? ? ? ? ? a.href = url;

? ? ? ? ?a.download = `文件名稱.txt`;

? ? ? ? ?document.body.appendChild(a);

? ? ? ? ?a.click();

? ?}).catch((err) => {

? ? ? console.log('下載失敗');

? ? })

? }

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • # Ajax標簽(空格分隔): 筆記整理---[TOC]### 從輸入網(wǎng)址開始:- 在學(xué)習(xí)ajax之前,你應(yīng)該先了...
    V8閱讀 343評論 1 0
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,142評論 0 2
  • 本文詳細介紹了 XMLHttpRequest 相關(guān)知識,涉及內(nèi)容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker閱讀 13,994評論 2 18
  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,829評論 1 56
  • 承認自己的不足是很快樂的 承認不足,不用踮起腳尖去追逐那高高在上的目標 承認不足,意味著還有要學(xué)的東西,還有進步的...

友情鏈接更多精彩內(nèi)容