前端實現圖片下載

MingjunYang 發布于2019-08-22 10:54 / 1638人閱讀

摘要：測試說明位位位位服務端實現下載通過修改響應頭，告訴瀏覽器這個請求回來的是個附件。控制用戶請求所得的內容存為一個文件的時候提供一個默認的文件名，文件直接在瀏覽器上顯示或者在訪問時彈出文件下載對話框。

測試說明

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 跨域資源共享設置

前端方案 通過的 download 屬性

下載圖片

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

href 所指向的地址，必須與當前網站同源，否則

chrome 65.0.3325.181 下測試，只能下載不能改名

chrome 69.0.3497.92 中已經嚴格遵循同源策略的限制，如果加載了非同源的內容，download 屬性將失效，等效導航功能。

Firefox 61.0.1同上

其它限制

通過 js 動態創建并設置 download 屬性

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

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

以導出 canvas 圖片為例：

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

通過 js 創建

網上有很多文章都提到這個方案，但是這里不推薦：

document.execCommand("SaveAs") 中 SaveAs 是個非標準值，主要用來兼容 ie 不支持標簽 download 屬性的場景

window.frames["iframeName"].document 受到同源策略的影響，如果圖片地址跨域，是無法訪問的的屬性和方法

參考

header中Content-Disposition的作用與使用方法

Does execCommand SaveAs work in Firefox?

在瀏覽器端用JS創建和下載文件 In JavaScript on 2014年01月03日

How to clone or re-dispatch DOM events?

云服務器 GPU云服務器前端實現前端實現websocket即時通信前端下載實現圖片上傳

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91416.html

node實現文件下載不得不說的那些事兒

摘要：如果像本例中這樣的場景會遇到這樣一個問題，詳見鏈接當請求參數過長或為了安全，就需要用到下載。寫到這里自己都忍不住想錘自己，給自己挖坑不說，這樣來回請求下載，流量，真的是敗家。這幾天一直在做遠程文件下載的事，現在總算有了解決，特來記錄一下踩過的坑和想揍自己的心需求應用場景是這樣的，底層邏輯數據請求接口是由Java寫的，也就是說原始文件存在Java服務端,返回時有加密措施由于工作...

Coly 2019-08-23 14:12 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-06-06）-下載文件&下載進度

摘要：前端最基礎的就是。一個朋友的問題，監測下載進度。這節主要是講如何使用，以及前端下載的核心操作。下載文件，并顯示進度條。下載文件，并顯示進度條下載文件上面已經實現了，那我們先說說如何顯示進度條。實現代碼如下，我們操作成讀流，然后統計長度。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（H...

sPeng 2019-08-26 13:58 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-06-06）-下載文件&下載進度

摘要：前端最基礎的就是。一個朋友的問題，監測下載進度。這節主要是講如何使用，以及前端下載的核心操作。下載文件，并顯示進度條。下載文件，并顯示進度條下載文件上面已經實現了，那我們先說說如何顯示進度條。實現代碼如下，我們操作成讀流，然后統計長度。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（H...

freecode 2019-08-02 15:11 評論0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：發布應用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點個開源不易。作者將原素材文章進行了新內容的添加和重新排列，但是因為文章高效的代碼編寫技巧總結前端掘金本文總結了代碼編寫技巧，來提升你的和代碼。收藏安卓開發中非常實用優秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉念一想,已經有這么多優秀的庫了,就沒必要再去重復造輪子了,便歸納工作中比...

ermaoL 2019-08-29 13:03 評論0 收藏0