XmLHttpRequst下载Excel

 //得到浏览器版本
    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");

原文地址:https://www.cnblogs.com/gaocong/p/5607385.html