在做a链接下载图片的时候遇到一个问题,在谷歌浏览器下只是新建了一个窗口,并没有实现下载。浏览器版本信息
经过实测,在谷歌下a链接实现下载图片必须具备两个条件。1,必须在启动服务,在服务器下运行。2,必须使用相对路径。
下面附上兼容写法代码:
<ul> <li><span>本人照片:</span><img src="0.JPG" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a> </li> <li><span>护照首页:</span><img src="1.jpg"alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a> </li> </ul>
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(); } //④点击事件下载(只需更改图片路径即可) function down_img(a) { var osb = a; var sb = a.previousSibling.src; // console.log(sb) if (myBrowser() === "IE" || myBrowser() === "Edge") { //IE (浏览器) SaveAs5(sb); } else { //!IE (非IE) osb.href = sb; osb.download = ""; } }