當使用者在畫面上點擊「圖片連結」時,一般而言是會開新頁面顯示。若你想要讓使用者點擊圖片連結後,直接進行下載的話,那麼會需要協同後端在點擊該連結時,於回傳的 Response Header 進行設定。
內容
當你點擊圖片的連結時,用 DevTool 開發者工具查看,你可以在 Reponse Header 中得知資訊。以下圖為例:
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