js下載文件 監聽下載完成事件

<script src="xxx/layui/layui.js"></script>
<script src="xxx/jquery.min.js"></script>
<script>
  var down_windows;
 
  function exportAll(){
    var url  = "xxx.xls";
 
    // 現在使用的方法 可在下載完成的時候關閉load彈窗
    getDownload(url);
 
    // 之前使用的方法 存在的問題就是 如果文件下載很慢 用戶以為沒有點擊上 會重復點擊 如果加上load彈窗 由於無法監聽下載完成事件 無法在下載完成瞬間關閉load彈窗
    // window.location.href = "<{:url('/contract.Index/out')}>" + "?branch_id="+branch_id+"&name="+name;
  }
 
 
  //填寫你的下載時加載的操作
  load = function() {
    down_windows = layer.load(1, {
      shade: [0.5,'#fff'] //0.1透明度的白色背景
    });
  }
  //下載完成后觸發，用來關閉提示框
  disload = function() {
    layer.close(down_windows)
  }
  // 下載使用的方法
  getDownload = function(url) {
    load();
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);    // 也可用POST方式
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status === 200) {
        var blob = this.response;
        if (navigator.msSaveBlob == null) {
          var a = document.createElement('a');
          var headerName = xhr.getResponseHeader("Content-disposition");
          a.download = decodeURIComponent(headerName).substring(20);
          a.href = URL.createObjectURL(blob);
          $("body").append(a);    // 修復firefox中無法觸發click
          a.click();
          URL.revokeObjectURL(a.href);
          $(a).remove();
        } else {
          navigator.msSaveBlob(blob, decodeURIComponent(headerName).substring(20));
        }
      }
      disload();
    };
    xhr.send()
  };
 
</script>

 

 

來源：https://blog.csdn.net/wb_json/article/details/121122425