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