需求:
點擊圖片的下載鏈接直接觸發瀏覽器下載,而不是瀏覽器打開圖片。
思路:
1、谷歌瀏覽器在點擊圖片鏈接的時候往往是直接打開圖片而不是下載;
2、首先考慮的是在a標簽上增加download屬性來觸發下載,但是由於該屬性有跨域限制,導致失效;
3、其次考慮在Response頭上增加“Content-Disposition“字段,格式為“Content-Disposition=attachment;filename=abc.png”;
4、由於文件存儲在OSS上,給的下載地址是直接從OSS下載的,經過查詢阿里雲的文檔后,發現只要在上傳的Form表單中增加Content-Disposition屬性,下載時OSS服務器返回的Response中就會自動攜帶了該字段。
相關資料:
截取自阿里雲文檔中關於對上傳到OSS描述的部分資料:
說明 OSS支持HTTP協議規定的5個請求頭:Cache-Control、Expires、Content-Encoding、Content-Disposition、Content-Type。如果上傳Object時設置了這些請求頭,則該Object被下載時,相應的請求頭值會被自動設置成上傳時的值。
名稱 類型 是否必選 描述 Authorization 字符串 否 表示請求本身已被授權,詳情請參見RFC2616。 通常情況下Authorization是必選請求頭,但如果采用了URL包含簽名,則不用攜帶該請求頭。詳情請參見在URL中包含簽名。
默認值:無
Cache-Control 字符串 否 指定該Object被下載時網頁的緩存行為,詳情請參見RFC2616。 默認值:無
Content-Disposition 字符串 否 指定該Object被下載時的名稱,詳情請參見RFC2616。 默認值:無
截取自MSDN中關於對Content-Disposition描述的部分資料:
在常規的HTTP應答中,
Content-Disposition
響應頭指示回復的內容該以何種形式展示,是以內聯的形式(即網頁或者頁面的一部分),還是以附件的形式下載並保存到本地。
作為消息主體中的消息頭
在HTTP場景中,第一個參數或者是
inline
(默認值,表示回復中的消息體會以頁面的一部分或者整個頁面的形式展示),或者是attachment
(意味着消息體應該被下載到本地;大多數瀏覽器會呈現一個“保存為”的對話框,將filename
的值預填為下載后的文件名,假如它存在的話)。Content-Disposition: inline Content-Disposition: attachment Content-Disposition: attachment; filename="filename.png"
代碼:
/** formData為上傳的表單對象 **/ formData.append('Content-Disposition', 'attachment;filename=' + file.name); // file.name就是要下載的文件的名稱
實現的效果:
charles抓包顯示Response中攜帶了該字段:
在谷歌瀏覽器下表現為直接下載而不是打開圖片: