js 文件下載 進度條

 

js:

 /**
  * 下載文件 - 帶進度監控
  * @param url: 文件請求路徑
  * @param params: 請求參數
  * @param name: 保存的文件名
  * @param progress: 進度處理回調函數
  * @param success: 下載完成回調函數
  * eg: progressDownLoad({url:'http://loacalhost:8080/downLoad.action',name:'file.rar',progress:function(evt){
  *        console.log(evt);
  *     }});
  **/
  function progressDownLoad({url,filename,params,progress,success}){
      var xhr = new XMLHttpRequest();
      xhr.open("POST", url, true);
      //監聽進度事件
      xhr.addEventListener("progress", function (evt) {
          if(progress) try{ progress.call(evt); }catch(e){}
      }, false);

      xhr.responseType = "blob";
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
      xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
              if (typeof window.chrome !== 'undefined') {
                  // Chrome version
                  var link = document.createElement('a');
                  link.href = window.URL.createObjectURL(xhr.response);
                  link.download = filename;
                  link.click();
              } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                  // IE version
                  var blob = new Blob([xhr.response], { type: 'application/force-download' });
                  window.navigator.msSaveBlob(blob, filename);
              } else {
                  // Firefox version
                  var file = new File([xhr.response], filename, { type: 'application/force-download' });
                  window.open(URL.createObjectURL(file));
              }
              if(success) try{ success.call(xhr); }catch(e){}
          }
      };
      // FormData
      //var formData = new FormData();
      var paramsStr = '';
      if(params) for (var key in params) paramsStr += '&'+key+'='+params[key];
      if(paramsStr) paramsStr = paramsStr.substring(1);

      xhr.send(paramsStr);
  }

 

XMLHttpRequest的監聽事件：

onabort	當請求中止時觸發
onload	當請求成功時觸發
onloadend	在請求成功或者失敗時觸發；load、abort、error、timeout事件發生之后
onloadstart	當請求開始時觸發
onreadystatechange	當readyStateChange屬性改變時觸發
ontimeout	當timeout屬性指定的時間已經過去但響應依舊沒有完成時觸發
onerror	當請求因錯誤失敗時觸發。注意404等狀態碼不是error，因為此時響應仍然是成功完成的。
onprogress	當響應主體正在下載重復觸發（約每隔50ms一次）