[指南] 如何讓使用者點擊一個圖片連結,是直接下載而不是在畫面上顯示

章節連結

當使用者在畫面上點擊「圖片連結」時,一般而言是會開新頁面顯示。若你想要讓使用者點擊圖片連結後,直接進行下載的話,那麼會需要協同後端在點擊該連結時,於回傳的 Response Header 進行設定。
search


內容

當你點擊圖片的連結時,用 DevTool 開發者工具查看,你可以在 Reponse Header 中得知資訊。以下圖為例:
guide-image-link-click-display-download-1
Content-type 為 image/png,代表告訴瀏覽器說:請當成一張 png 圖片解析。若你將 content-type 指定為:binary/octet-stream or application/octet-stream,就等同於告訴瀏覽器:請將此連結所回傳的值當作「檔案」來進行下載


參考資料

1. Do I need Content-Type: application/octet-stream for file download?
2. Day20-內容要如何處置-Content-Disposition

按讚加入粉絲團

延伸閱讀