圖片點擊后直接下載

1. 使用a標簽的download屬性。

<a href="https://geekjc-img.geekjc.com/logo.png" download="logo.png">下載圖片</a>

將a標簽的href屬性指向圖片的地址;同時增加download屬性;即可實現點擊下載.

download屬性的屬性值選填,代表下載圖片的名稱,如不填寫,則使用href中的圖片名稱,即圖片的原名稱.

a標簽的download屬性目前主流瀏覽器只有火狐和谷歌支持.

2. iframe標簽，生成iframe,src指向圖片地址,調用document.execCommand("SaveAs")方法.

這里有瀏覽器兼容性問題：

在Trident內核瀏覽器(IE等)下,給按鈕(a標簽)綁定事件,使用創建<iframe>標簽方法;

在火狐,谷歌下使用<a>標簽的download屬性進行下載.

so , 

首先判斷瀏覽器,決定增加屬性,還是綁定事件;

在綁定事件的邏輯內,

首先判斷頁面是否存在指定的<iframe>,不存在則生成,存在則修改src屬性.

然后調用SaveAs命令進行保存.(document.execCommand('saveAs')

)

3. 舉例：

//判斷是否為Trident內核瀏覽器(IE等)函數
function browserIsIe() {
    if (!!window.ActiveXObject || "ActiveXObject" in window){
        return true;
    }
    else{
        return false;
    }
}

 

<iframe height="0" width="0" src="201782595503368.jpg" name="saveImage" id="saveImage"> </iframe> 
<a href="C:\Users\12580\Desktop\201782595503368.jpg" onclick="saveImage.document.execCommand('saveAs');">Click Me</a> a

點擊后，直接加載了圖片：