HTML里的a链接download 属性浏览器js点击下载图片

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博客如需转载请紧急联系作者