使用a标签下载图片-兼容IE

 页面示例

 

 

a标签有一个download属性，加上它就可以实现简单的下载功能。download属性值是下载文件的名称，默认为空则是文件本身的名字。

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

兼容IE的方法：

 1 var module = module || {}
 2 
 3 //判断浏览器类型
 4 module.browser = function myBrowser() {
 5     var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
 6     var isOpera = userAgent.indexOf("Opera") > -1;
 7     if (isOpera) {        return "Opera"    }; //判断是否Opera浏览器
 8     if (userAgent.indexOf("Firefox") > -1) {        return "FF";    } //判断是否Firefox浏览器
 9     if (userAgent.indexOf("Chrome") > -1) {        return "Chrome";    }
10     if (userAgent.indexOf("Safari") > -1) {        return "Safari";    } //判断是否Safari浏览器
11     if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {        return "IE";    }; //判断是否IE浏览器
12     if (userAgent.indexOf("Trident") > -1) {        return "Edge";    } //判断是否Edge浏览器
13 }
14 
15 module.download = function (url) {
16     $(".size-wrap-pc .size-list").on('click', '.size', function () {
17         // 兼容IE
18         var oPop = window.open($(this).attr('href'), "", "");
19         window.open('', '_self');
20         window.close();
21         for (; oPop.document.readyState != "complete";) {
22             if (oPop.document.readyState == "complete") break;
23         }
24         oPop.document.execCommand("SaveAs");
25         oPop.location.href = url;
26         //oPop.close();
27         //}
28         // }else{
29         //     var oPop =window.open($(this).attr('href'), "", "");
30         //     //window.close();
31         // }
32     })
33 }
34 
35 var b = module.browser();
36 if (b == "IE" || b == "Edge") {
37     var url = window.location.href;
38     module.download(url);
39 }

由于IE不能直接下载图片，只能打开图片，又希望保留当前页面，第18行，先在新窗口打开图片，第24行执行存储命令，弹出文件管理器，当操作结束时，关闭原页面，第25行将新窗口跳转到原来的地址。

posted @ 2019-11-22 14:48  菜菜入锅  阅读(1736)  评论(0)  编辑  收藏  举报