HTML裡的a連結download 屬性瀏覽器js點選下載圖片
阿新 • • 發佈:2018-12-31
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>下載的。