使用a標簽下載圖片-兼容IE

 頁面示例

 

 

a標簽有一個download屬性，加上它就可以實現簡單的下載功能。download屬性值是下載文件的名稱，默認為空則是文件本身的名字。

<a href="https://www.baidu.com/img/bd_logo1.png" download="logo.png">下載圖片</a>

兼容IE的方法：

var module = module || {}

//判斷瀏覽器類型
module.browser = function myBrowser() {
    var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {        return "Opera"    }; //判斷是否Opera瀏覽器
    if (userAgent.indexOf("Firefox") > -1) {        return "FF";    } //判斷是否Firefox瀏覽器
    if (userAgent.indexOf("Chrome") > -1) {        return "Chrome";    }
    if (userAgent.indexOf("Safari") > -1) {        return "Safari";    } //判斷是否Safari瀏覽器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {        return "IE";    }; //判斷是否IE瀏覽器
    if (userAgent.indexOf("Trident") > -1) {        return "Edge";    } //判斷是否Edge瀏覽器
}

module.download = function (url) {
    $(".size-wrap-pc .size-list").on('click', '.size', function () {
        // 兼容IE
        var oPop = window.open($(this).attr('href'), "", "");
        window.open('', '_self');
        window.close();
        for (; oPop.document.readyState != "complete";) {
            if (oPop.document.readyState == "complete") break;
        }
        oPop.document.execCommand("SaveAs");
        oPop.location.href = url;
        //oPop.close();
        //}
        // }else{
        //     var oPop =window.open($(this).attr('href'), "", "");
        //     //window.close();
        // }
    })
}

var b = module.browser();
if (b == "IE" || b == "Edge") {
    var url = window.location.href;
    module.download(url);
}

由於IE不能直接下載圖片，只能打開圖片，又希望保留當前頁面，第18行，先在新窗口打開圖片，第24行執行存儲命令，彈出文件管理器，當操作結束時，關閉原頁面，第25行將新窗口跳轉到原來的地址。