js 文件下载 进度条

Posted 2020-10-12 【云】风过无痕

 

js:

 /**
  * 下载文件 - 带进度监控
  * @param url: 文件请求路径
  * @param name: 保存的文件名
  * @param progress: 进度处理回调函数
  * eg: progressDownLoad({url:‘http://loacalhost:8080/downLoad.action‘,‘file.rar‘,progress:function(percent){
  *        console.log(percent);
  *     }});
  **/
  function progressDownLoad({url,filename,progress}){
      var req = new XMLHttpRequest();
      req.open("POST", url, true);
      //监听进度事件
      req.addEventListener("progress", function (evt) {
          if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              if(progress) try{ progress.call(percentComplete); }catch(e){}
          }
      }, false);

      req.responseType = "blob";
      req.onreadystatechange = function () {
          if (req.readyState === 4 && req.status === 200) {
              if (typeof window.chrome !== ‘undefined‘) {
                  // Chrome version
                  var link = document.createElement(‘a‘);
                  link.href = window.URL.createObjectURL(req.response);
                  link.download = filename;
                  link.click();
              } else if (typeof window.navigator.msSaveBlob !== ‘undefined‘) {
                  // IE version
                  var blob = new Blob([req.response], { type: ‘application/force-download‘ });
                  window.navigator.msSaveBlob(blob, filename);
              } else {
                  // Firefox version
                  var file = new File([req.response], filename, { type: ‘application/force-download‘ });
                  window.open(URL.createObjectURL(file));
              }
          }
      };
      req.send();
  }