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失效,變成是另開網頁檢視...