前端實現圖片下載

測試說明

• Chrome 65.0.3325.181 (64 位)
• Chrome 69.0.3497.92 (64 位)
• IE 11.0.9600.19002 (64 位)
• Firefox 61.0.1 (64 位)

服務端實現下載

經過修改 HTTP 響應頭，告訴瀏覽器這個請求回來的是個附件。以七牛爲例子：

這裏須要注意兩處：

• Content-disposition 是 MIME 協議的擴展，MIME 協議指示 MIME 用戶代理如何顯示附加的文件。控制用戶請求所得的內容存爲一個文件的時候提供一個默認的文件名，文件直接在瀏覽器上顯示或者在訪問時彈出文件下載對話框。
• Access-Control-Allow-Origin 跨域資源共享設置

前端方案

經過 <a> 的 download 屬性

<a href="/path/to/img" download="name.png">下載圖片</a>

拋開瀏覽器兼容性，還有幾點限制：

• href 所指向的地址，必須與當前網站同源，不然

  • chrome 65.0.3325.181 下測試，只能下載不能更名
  • chrome 69.0.3497.92 中已經嚴格遵循同源策略的限制，若是加載了非同源的內容，download 屬性將失效，等效導航功能。
  • Firefox 61.0.1同上
• 其它限制

經過 js 動態建立 <a> 並設置 download 屬性

原理和限制同上，代碼以下：（不支持IE）

function download(url, name) {
    const aLink = document.createElement('a')
    aLink.download = name 
    aLink.href = url 
    aLink.dispatchEvent(new MouseEvent('click', {}))
}

以導出 canvas 圖片爲例：

<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas')
download(canvas.toDataURL('image/png'), 'name.png')

經過 js 建立 <frame>

網上有不少文章都提到這個方案，可是這裏不推薦：

• document.execCommand('SaveAs') 中 SaveAs 是個非標準值，主要用來兼容 ie 不支持 <a> 標籤 download 屬性的場景
• window.frames["iframeName"].document 受到同源策略的影響，若是圖片地址跨域，是沒法訪問的 <frame> 的屬性和方法

參考

• header中Content-Disposition的做用與使用方法
• Does execCommand SaveAs work in Firefox?
• 在瀏覽器端用JS建立和下載文件 In JavaScript on 2014年01月03日
• How to clone or re-dispatch DOM events?