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);
      };
}