1.<a>download下载图片具有兼容性
所以需做兼容处理,使其兼容IE,就比较完美了。
2.最近有这方面的需求,从网上看了一些资料,拿过来不能直接使用,把他们整合了一下,作为笔记,方便自己以后使用,现在IE,Firefox,Chrome都可以用了。
3.代码如下:
(1)HTML部分
<div id="down">
<a id="downLoad">Click Me!</a>
</div>
(2.)js部分
//①判断浏览器类型
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浏览器
}
//②IE浏览器图片保存(IE其实用的就是window.open)
function SaveAs5(imgURL) {
var oPop = window.open(imgURL, "", "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();
}
//③下载函数(区分IE和非IE部分)
function oDownLoad(url) {
if(myBrowser() === "IE" || myBrowser() === "Edge") {
//IE (浏览器)
SaveAs5(url);
console.log(1)
} else {
//!IE (非IE)
odownLoad.href = url;
odownLoad.download = "";
}
}
//④点击事件下载(只需更改图片路径即可)
var odownLoad = document.getElementById("downLoad");
odownLoad.onclick = function() {
oDownLoad("1.jpg")
}
4.做如下几点说明:
(1) 360急速模式下
(2) 360兼容模式(相当于IE状态)
(3)Firefox
在火狐中保存的图片可以在(计算机=>下载 中找到)。
(4)Chrome
点击就直接下载了,就是使用<a href="1.jpg" download=""></a>下载的。
原文发布时间:2018-6-19
原文作者:hangGe0111
本文来源csdn博客如需转载请紧急联系作者