码迷,mamicode.com
首页 > 其他好文 > 详细

前台下载+遮罩层

时间:2020-07-08 20:03:11      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:temp   支持ie   aci   nav   window   author   order   UNC   mss   

  本文章来源一个大哥,美美的后台下载不用,非得搞前台下载,最后这件事情就弄到了我的身上。

 一. 本方法是Ajax调用的type是下载文件不同,data是下载路径(目前支持IE与谷歌别的浏览器没有试过)

  //服务器地址
 data= context.Request.Url.Scheme + "://" + context.Request.Url.Authority + "/Temp/" + filePath.Substring(filePath.LastIndexOf(‘\\‘) + 1);
function HttpRequest(type, data) { var xhr = new XMLHttpRequest(); xhr.open("get", data, true); xhr.responseType = "blob"; xhr.onload = function () { // 请求完成 //将文件对象交给回掉函数 var blob = this.response || this.responseText; if (blob.size == 0) { return; } var a = document.createElement(‘a‘); var filename = ""; if (type == 1) { filename = "XXX.pdf"; } else { filename = "XXX.docx"; }
        //IE浏览器专用 else 其他浏览器 if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename); } else { var url = window.webkitURL.createObjectURL(blob); a.href = url; a.download = filename; a.click(); window.webkitURL.revokeObjectURL(url); } }; xhr.send(); }

   二. 下载中添加了一个简单的遮罩层

    //关闭等待窗口
    function closeWaiting() {
        var bgDiv = document.getElementById("bgDiv");
        var msgDiv = document.getElementById("msgDiv");
        //移除背景遮罩层div
        if (bgDiv != null) {
            document.body.removeChild(bgDiv);
        }
        //移除中间信息提示层div
        if (msgDiv != null) {
            document.body.removeChild(msgDiv);
        }
    }
    //显示等待窗口
    function showWaiting() {
        var msgw, msgh, bordercolor;
        msgw = 500; //提示窗口的宽度
        msgh = 300; //提示窗口的高度
        bordercolor = "#336699"; //提示窗口的边框颜色
        titlecolor = "#99CCFF"; //提示窗口的标题颜色

        var sWidth, sHeight;
        sWidth = $(document).width();
        sHeight = $(document).height();

        //背景遮罩层div
        var bgObj = document.createElement("div");
        bgObj.setAttribute(‘id‘, ‘bgDiv‘);
        bgObj.style.position = "absolute";
        bgObj.style.top = "0px";
        bgObj.style.background = "#888";
        bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style = 3, opacity = 25, finishOpacity = 75";
        bgObj.style.opacity = "0.5";
        bgObj.style.left = "0px";
        bgObj.style.width = sWidth + "px";
        bgObj.style.height = sHeight + "px";
        document.body.appendChild(bgObj);

        //信息提示层div
        var msgObj = document.createElement("div");
        msgObj.setAttribute("id", "msgDiv");
        msgObj.setAttribute("align", "center");
        msgObj.style.position = "absolute";
        msgObj.style.background = "white";
        msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif Chroma(Color=#FFFFFF)";
        msgObj.style.border = "1px solid " + bordercolor;
        msgObj.style.width = msgw + "px";
        msgObj.style.height = msgh + "px";
        msgObj.style.top = (sHeight - msgh) / 2 + "px";
        msgObj.style.left = (sWidth - msgw) / 2 + "px";
        document.body.appendChild(msgObj);

        //标题栏
        var title = document.createElement("h4");
        title.setAttribute("id", "msgTitle");
        title.setAttribute("align", "left");
        title.style.margin = "0px";
        title.style.padding = "3px";
        title.style.background = bordercolor;
        title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX = 20, startY = 20, finishX = 100, finishY = 100, style = 1, opacity = 75, finishOpacity = 100); ";
        title.style.opacity = "0.75";
        title.style.border = "1px solid " + bordercolor;
        title.style.height = "20px";
        title.style.font = "14px Verdana, Geneva, Arial, Helvetica, sans-serif";
        title.style.color = "white";
        title.innerHTML = "下载中,请稍候......";
        document.getElementById("msgDiv").appendChild(title);

        //中间等待图标
        var img = document.createElement("img");
        img.style.margin = "90px 0px 10px 0px";
        img.style.width = "100px";
        img.style.height = "100px";
        img.setAttribute("src", "../Images/waiting.gif");
        document.getElementById("msgDiv").appendChild(img);
    }

  三. 遮罩层等待图片

                技术图片

 

前台下载+遮罩层

标签:temp   支持ie   aci   nav   window   author   order   UNC   mss   

原文地址:https://www.cnblogs.com/i-cheng/p/13268448.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!