需求

例如：文件下载，需要在项目页面中实时显示下载任务进度条

实现

 getPercent(url){
      let xhr = new XMLHttpRequest();
      // xhr.abort()取消请求
      xhr.open('GET', url, true);
      xhr.onprogress = function (e) {
        let percent = Math.floor( e.loaded / e.total * 100); // 下载进度
        if(percent==100){
        //  当进度100%时，需要操作的逻辑
        }
        // 这里可以做任务处理逻辑，比如进度条赋值
        console.log(percent, '实时进度');
      };
      xhr.send();
      xhr.responseType = "arraybuffer";
      xhr.onreadystatechange = event => {
        if(xhr.readyState == 4){
          if (xhr.status == 200){
            // 这里需要改成自己要下载的文件名
            const fileName = 'metaWorks.exe';
            // 请求头设置下载的文件类型
            let blob = new Blob([xhr.response], { type: "exe", application: "application/octet-stream" }); // 文件类型
            const downLoadLink = document.createElement('a');
            downLoadLink.download = fileName;
            downLoadLink.href = URL.createObjectURL(blob);
            downLoadLink.click();
          }
        }
      }
    }