您的位置:首页 > Web前端 > HTML

Iframe和a标签的downLoad新属性实现-调用浏览器的本地下载功能

2017-04-13 19:26 591 查看
//js中的html结构

<a class="downLoadA" style="display: inline-block;float:left;width: 40px;height: 40px;"><img id="downLoadImg" style="width:40px;height:40px;border:none;" type="button" class="downLoadImg_btn" src="/ngcs/src/js/communication/huawei/media/clientArea/downLoadImg.png"/></a</div>

//js如下完整代码;

//点击调用浏览器的本地下载功能

   var downLoadImg = function() {

       //获取图片的路径

        var imgPathSrc = $('#headImg',this.$el).attr("src");

        if(imgPathSrc.indexOf("_min") != "-1") {

            var temp = imgPath.indexOf("_min").split("_min");

            var part1 = temp[0];

            var part2 = temp[1];

            imgPathSrc = part1 + part2;

        }

        function myBrowser() {

            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

            var isOpera = userAgent.indexOf("Opera") > -1;

            //判断是否IE浏览器

            if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {

                return "IE";

            };

            //判断是否IE浏览器

            if(userAgent.indexOf("Trident") > -1) {

                return "Edge";

            }

        }        

        //调用当前时间作为图片的名字

            function getNowFormatDate() {

                 var date = new Date();

                 var month = date.getMonth() + 1;

                     var strDate = date.getDate();

                  if (month >= 1 && month <= 9) {

                      month = "0" + month;

                    }

                  if (strDate >= 0 && strDate <= 9) {

                    strDate = "0" + strDate;

                    }

                      var currentdate = date.getFullYear() + month + strDate + date.getHours()+ date.getMinutes()+ date.getSeconds()+randNum(0, 9)+randNum(0, 9)+randNum(0, 9)+randNum(0, 9);

               return currentdate;

         }

         function randNum(x, y) {

                return Math.floor(Math.random()*(y - x + 1) + x);

            }
  //弹框的点击事件调用本地下载功能

         function DownLoadReportIMG(imgPathURL) {

             //如果隐藏IFRAME不存在,则添加

             if (!document.getElementById("IframeReportImg")){

                 iframeIEDown = $('<iframe style="display:none;" id="IframeReportImg" src='+imgPathURL+' name="IframeReportImg"  width="0" height="0" src="about:blank"></iframe>');

                  iframeIEDown.appendTo("body");

               }

             if(navigator.userAgent.toLowerCase().indexOf('se 2.x')>-1&&navigator.userAgent.toLowerCase().indexOf('trident')){

                 setTimeout(function(){

                       document.frames["IframeReportImg"].document.execCommand("SaveAs");

                       $('#IframeReportImg').remove();

                   },90);

             }else{

                 setTimeout(function(){

                       document.frames["IframeReportImg"].document.execCommand("SaveAs");

                       $('#IframeReportImg').remove();

                   },30);

             }

                     

        }

            if(myBrowser() === "IE" || myBrowser() === "Edge") {        

                 DownLoadReportIMG(imgPathSrc)

            } else {

                //!IE

                $('.downLoadA').attr('href', imgPathSrc);

              if(navigator.userAgent.indexOf("Firefox") > -1){  

                  $('.downLoadA').attr('download', getNowFormatDate()+imgPathSrc.substr(-4));      

                    }else{

                       $('.downLoadA').attr('download', getNowFormatDate());

                     }

            }

    }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐