html5 a 標籤 download 屬性 在 chrome,edge,ie9,ios safari,line,facebook 相關介紹 & 下載外部網域圖片方法

分享至

範例:
<a href=”#” download=”aaa.jpg”>

當<a>標籤加上download屬性時就能下載圖片,download=”aaa.jpg”則是能夠為圖片命名。

不過在跨瀏覽器的支援下就有問題了,接下來我們來探討在chrome,edge,ie9,line,facebook底下download會發生甚麼事。

download屬性兼容性如下:
chrome:支援。
edge:支援。
ie9:不支援。

以下也會介紹若使用外部網域圖片,按下<a>之後會發生甚麼事。

chrome

支援download屬性,按下<a>之後會再網頁下方出現下載圖片,功能完全正常。

若要使用外部網域圖片必須使用javascript先將圖片網址設定在canvas裡,再轉成base64圖檔,之後才能成功下載,否則會因為是下載第三方資源而讓download失效,變成是網頁檢視(預覽)圖片。

p.s 如果是使用iphone7或iphone7plus開啟chrome的話,使用canvas轉base64檔會下載成一個document檔(無效的檔案),所以為了iphone7以下的機型,必須改成下載本地端的圖檔。

edge

支援download屬性,按下<a>之後會再網頁下方出現下載圖片,功能完全正常。

若要下載圖片必須使用javascript,將 a 標籤的 href 修改url,但是必須為本地端的圖片url,否則會變成是網頁檢視(預覽)圖片。

若使用外部網域圖片,則download屬性失效,變成是前往該網站預覽圖片。

ie9

不支援download屬性,按下<a>之後download失效,變成是網頁檢視(預覽)圖片。
若使用外部網域圖片會變成是網頁檢視(預覽)圖片。

FACEBOOK瀏覽器

不支援download屬性,按下<a>之後download失效,變成是另開網頁檢視(預覽)圖片,長按圖片可以下載。

QQ瀏覽器

不支援download屬性,按下<a>之後download失效,變成是另開網頁檢視(預覽)圖片,長按圖片可以下載。

LINE

不支援download屬性,按下<a>之後download失效,長按圖片無法下載,也不能點擊下載圖片,就算是連到雲端硬碟也無法下載。解決方法(在網址後面加上強制使用外部瀏覽器開啟”?openExternalBrowser=1″):
a2.attr(“href”,”圖片網址?openExternalBrowser=1″);


統整以上資訊我們可以將程式碼寫成以下範例:

先用window.navigator.userAgent來判斷瀏覽器,決定我們要怎麼使用下載的方法。


▼html

<canvas id="canvas1" width="1024" height="1336" style="display: none;"></canvas>
<canvas id="canvas2" width="1024" height="1336" style="display: none;"></canvas>
<a href="#" download="aa.jpg" class="act_download_img_btn1"></a>
<a href="#" download="bb.jpg" class="act_download_img_btn2"></a>



▼javascript

var explorer = window.navigator.userAgent;
 let a1 = $('.act_download_img_btn1');
 let a2 = $('.act_download_img_btn2');
 /*判斷瀏覽器做動作*/
if ((explorer.indexOf("MSIE") >= 0)||(explorer.indexOf("Trident/7.0") >= 0)) {//ie10及以下||IE11
     a1.attr("href","外部圖片url");
     a2.attr("href","外部圖片url");
}else if((explorer.indexOf("Edge") >= 0)||(explorer.indexOf("FBAV") >= 0)||(explorer.indexOf("QQ") >= 0)){//Edge||Line||Facebook App內瀏覽器||QQ瀏覽器
 a1.attr("href","本地端圖片url");
     a2.attr("href","本地端圖片url");
}else if(explorer.indexOf("Line") >= 0){//Line
        /*line使用強制開啟外部連結?openExternalBrowser=1*/
        a1.attr("href","https://drive.google.com/file/d/12SySE6HvJAJdaYyKRtDx6p7gvz8L_uIF/view?usp=sharing&openExternalBrowser=1");
     a2.attr("href","https://drive.google.com/file/d/14fuJsoI0ax8BdeRjqYQUm099gmN2u9WJ/view?usp=sharing&openExternalBrowser=1");
}else{
     var canvas1 = document.createElement('canvas'),
       ctx1 = canvas1.getContext('2d'),
       img1 = new Image();
       img1.crossOrigin = 'Anonymous';
       img1.src = '外部圖片url';
       img1.onload = function() {
           canvas1.height = img1.height;
           canvas1.width = img1.width;
           ctx1.drawImage(img1, 0, 0);
           var dataURL1 = canvas1.toDataURL('image/jpeg');//轉成base64圖檔
           a1.attr("href",dataURL1);
       };

     var canvas2 = document.createElement('canvas'),
       ctx2 = canvas2.getContext('2d'),
       img2 = new Image();
       img2.crossOrigin = 'Anonymous';
       img2.src = '外部圖片url';
       img2.onload = function() {
           canvas2.height = img2.height;
           canvas2.width = img2.width;
           ctx2.drawImage(img2, 0, 0);
           var dataURL2 = canvas2.toDataURL('image/jpeg');//轉成base64圖檔
           a2.attr("href",dataURL2);
       };
}

發表迴響