zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    软件测试技术实战 设计、工具及管理(51Testing软件测试网作品系列)
    MATLAB智能算法超级学习手册
    HTML与CSS入门经典(第9版)
    深入理解Android 5 源代码
    中文版Dreamweaver CS6基础培训教程(第2版)
    可用性测试手册(第2版)
    网络综合布线系统与施工技术第4版
    PHP核心技术与最佳实践(第2版)
    [OC Foundation框架
    [OC Foundation框架
  • 原文地址:https://www.cnblogs.com/youmingkuang/p/15740216.html
Copyright © 2011-2022 走看看