JavaScript实现现在文件时,弹出另存的框框,js实现下载文件

 我的笔记   2020-03-02 16:20   138 人阅读  1 条评论

问题:客户想要实现下载文件时弹出文件的保存地方,就是弹出另存为的框,但是浏览器大多数都不默认打开此功能,所以需要在代码层面解决这个事情.

Js代码:

var Download = function () {
    var downLoad=function (obj,urlc) {
        var odownLoad = $(obj)[0];
        var url = urlc;
        //取得浏览器的userAgent字符串
        var userAgent = navigator.userAgent;
        //浏览器类型
        var chromeType = "";
        var isOpera = userAgent.indexOf("Opera") > -1;
        //判断是否Opera浏览器
        if (isOpera) {
            chromeType = "Opera"
        };
        //判断是否Firefox浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            chromeType = "FF";
        }
        //判断是否Chrome浏览器
        if (userAgent.indexOf("Chrome") > -1) {
            chromeType = "Chrome";
        }
        //判断是否Safari浏览器
        if (userAgent.indexOf("Safari") > -1) {
            chromeType = "Safari";
        }
        //判断是否IE浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            chromeType = "IE";
        };
        //判断是否Edge浏览器
        if (userAgent.indexOf("Trident") > -1) {
            chromeType = "Edge";
        }
        if (chromeType === "IE" || chromeType === "Edge") {
            //IE、Edge
            odownLoad.href = "#";
            var oImg = document.createElement("img");
            oImg.src = url;
            oImg.id = "downImg";
            var odown = document.getElementById("down");
            odown.appendChild(oImg);
            var oPop = window.open(document.getElementById('downImg').src, "", "width=1, height=1, top=5000, left=5000");
            for (; oPop.document.readyState != "complete";) {
                if (oPop.document.readyState == "complete") break;
            }
            oPop.document.execCommand("SaveAs");
            oPop.close();
        } else {
            //!IE、Edge
            odownLoad.href = url;
            odownLoad.download = "";
        }
    };
    return {
        downLoad:function (obj,urlc) {
            downLoad(obj,urlc);
        }

    };

}();


我的笔记博客版权我的笔记博客版权
本文地址:https://wdnote.com/post/757.html
版权声明:本文为原创文章,版权归 我的笔记 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

 评论列表

  1. 热搜榜
    热搜榜  @回复

    文章不错非常喜欢