//得到浏览器版本 myJqHelp.getBrowser = function () { var ua = window.navigator.userAgent; var isIE = !!window.ActiveXObject || "ActiveXObject" in window; var isFirefox = ua.indexOf("Firefox") != -1; var isOpera = window.opr != undefined; var isChrome = ua.indexOf("Chrome") && window.chrome; var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1; if (isIE) { return "IE"; } else if (isFirefox) { return "Firefox"; } else if (isOpera) { return "Opera"; } else if (isChrome) { return "Chrome"; } else if (isSafari) { return "Safari"; } else { return "Unkown"; } } //字节转换 myJqHelp.bConvertKBMBGB = function (limit) { var size = ""; if (limit < 0.1 * 1024) { //如果小于0.1KB转化成B size = limit.toFixed(2) + "B"; } else if (limit < 0.1 * 1024 * 1024) {//如果小于0.1MB转化成KB size = (limit / 1024).toFixed(2) + "KB"; } else if (limit < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB size = (limit / (1024 * 1024)).toFixed(2) + "MB"; } else { //其他转化成GB size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"; } var sizestr = size + ""; var len = sizestr.indexOf("."); var dec = sizestr.substr(len + 1, 2); if (dec == "00") {//当小数点后为00时 去掉小数部分 return sizestr.substring(0, len) + sizestr.substr(len + 3, 2); } return sizestr; } //加载进度条 myJqHelp.loadingProgress = function (domId) { var mask_bg = document.createElement("div"); mask_bg.id = domId; mask_bg.style.position = "absolute"; mask_bg.style.top = "0px"; mask_bg.style.left = "0px"; mask_bg.style.width = "100%"; mask_bg.style.height = "100%"; mask_bg.style.backgroundColor = "rgba(7, 7, 7, 0.5)"; mask_bg.style.zIndex = 10001; document.body.appendChild(mask_bg); var mask_msg = document.createElement("div"); mask_msg.style.position = "absolute"; mask_msg.style.top = "35%"; mask_msg.style.left = "42%"; mask_msg.style.width = "20%"; mask_msg.style.backgroundColor = "white"; mask_msg.style.border = "#336699 1px solid"; mask_msg.style.textAlign = "center"; mask_msg.style.fontSize = "1.1em"; mask_msg.style.fontWeight = "bold"; mask_msg.style.padding = "0.5em 3em 0.5em 3em"; mask_msg.style.zIndex = 10002; var progressBar = $(`<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style=" 0%;"> </div> </div><span name='progress'>0/0</span>`); progressBar.css("z-index", 10003); $(mask_msg).append(progressBar); mask_bg.appendChild(mask_msg); } //关闭进度条 myJqHelp.closeProgress = function (domId) { var mask_bg = document.getElementById(domId); if (mask_bg != null) mask_bg.parentNode.removeChild(mask_bg); } //excel下载带进度条 myJqHelp.excelDownLoad = function (url, progressId, fileName, type) { var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.responseType = "blob"; xhr.addEventListener("loadstart", function (ev) { myJqHelp.loadingProgress(progressId); // 开始下载事件:下载进度条的显示 $('div.progress-bar').css('width', "0%"); $("span[name='progress']").text("0/0"); }); xhr.addEventListener("progress", function (ev) { // 下载中事件:计算下载进度 var max = ev.total; var value = ev.loaded; var width = value / max * 100; $('div.progress-bar').css('width', width + "%"); $("span[name='progress']").text(myJqHelp.bConvertKBMBGB(value) + "/" + myJqHelp.bConvertKBMBGB(max)); }); xhr.addEventListener("load", function (ev) { // 下载完成事件:处理下载文件 if (type == "2003") { type = "application/vnd.ms-excel"; } else { type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; } if (this.status == 200) { var blob = this.response; var browser = myJqHelp.getBrowser(); if (browser == "Chrome") { var link = document.createElement('a'); var file = new Blob([blob], { type: type }); link.href = window.URL.createObjectURL(file); link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); } else if (browser == "Firefox") { var file = new File([blob], fileName, { type: type }); var url = URL.createObjectURL(file); parent.location.href = url; window.URL.revokeObjectURL(url); } //else if (browser == "IE") { // var file = new Blob([blob], { type: 'application/force-download' }); // window.navigator.msSaveBlob(file, fileName); //} } }); xhr.addEventListener("loadend", function (ev) { // 结束下载事件:下载进度条的关闭 myJqHelp.closeProgress(progressId); }); xhr.addEventListener("error", function (ev) { }); xhr.addEventListener("abort", function (ev) { }); xhr.send(); }
基于bootstrap样式、与jq。
使用方法:
myJqHelp.excelDownLoad(url, "myProgress","orders.xls","2003");