实现能实时了解下载文件进度的方式

这是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"; //接收二进制流数据

     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);

    }

  })

}



调用ajax的函数:

handleConfirmDownload = () => {

   const progress = (event) => {

      const {total, loaded} = event;

       loaded/total; //当前进度

    };

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

         const url = window.URL.createObjectURL(res),//将二进制流转为内存地址

                   a = document.createElement('a');    

          a.href = url;

         a.download = `文件名称.txt`;

         document.body.appendChild(a);

         a.click();

   }).catch((err) => {

      console.log('下载失败');

    })

  }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • # Ajax标签(空格分隔): 笔记整理---[TOC]### 从输入网址开始:- 在学习ajax之前,你应该先了...
    V8阅读 307评论 1 0
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,068评论 0 2
  • 本文详细介绍了 XMLHttpRequest 相关知识,涉及内容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker阅读 13,849评论 2 18
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,748评论 1 56
  • 承认自己的不足是很快乐的 承认不足,不用踮起脚尖去追逐那高高在上的目标 承认不足,意味着还有要学的东西,还有进步的...