怎麼去控制瀏覽器對資源文件的處理行爲

瀏覽器是怎麼處理文件連接的

一般當用戶打開一個資源的url,若是瀏覽器支持這個格式的文件的狀況下，瀏覽器會嘗試去再頁面裏展現它而不是直接下載。例如一張圖片(jpg, png, gif等)，幾乎全部瀏覽器都會去將圖片在瀏覽器裏面展現。

對於壓縮格式的文件(zip, tar, gzip等)瀏覽器老是會直接去下載它們，另一些格式的文件，根據瀏覽器的不一樣也會有差別的處理方法，例如Microsoft Word文件(doc, docx)在ie瀏覽器下一般會在瀏覽器中展現，可是其餘瀏覽器幾乎都會直接下載它，一樣的對於PDF文件chrome有本身的pdf 轉換器它會嘗試去在瀏覽器上展現該文件。

強制下載文件

對於瀏覽器這種行爲，通常狀況下是能夠接受的，由於用戶能夠在瀏覽器顯示文件後將文件保存到電腦中，可是一些狀況下用戶可能但願文件直接被下載而不是在瀏覽器中被打開，好比有時候用戶想去下載一個歌曲，可是瀏覽器可能回去播放該音頻。那麼怎麼讓瀏覽器強制去下載文件要怎麼作呢

a標籤的download屬性

html5中 a 標籤新增了 download 屬性，該屬性指示瀏覽器下載url的內容而不是導航到url，所以若是配置了此屬性用戶會直接下載url的內容。做爲開發若是想直接觸發該事件咱們能夠直接用代碼模擬a標籤和點擊事件

const link = document.createElement('a');
    link.addEventListener('click', function() {
      link.download = xxx;
      link.href = xxx;
    });
    const e = document.createEvent('MouseEvents');
    e.initEvent('click', false, false);
    link.dispatchEvent(e);

• download屬性只在同域時候有效，當跨域請求時候該屬性將會被忽略。
• 當前並不是因此瀏覽器都支持該屬性，須要瀏覽器考慮兼容性。

改變資源格式

瀏覽器會根據資源類型去判斷是否支持，若是支持時會嘗試去在頁面上展現該資源。瀏覽器判斷資源類型是根據返回頭Content-Type的值，所以一方面咱們在服務端能夠設置返回頭字段爲文件流'Content-Type': 'application/octet-stream'，或者根據一些具體資源直接壓縮後傳輸，瀏覽器不能分析zip之類的壓縮文件因此會直接去下載它們。

配置Content-Disposition

在HTTP場景中，Content-Disposition 消息頭指示回覆的內容該以何種形式展現，是之內聯的形式（即網頁或者頁面的一部分），仍是以附件的形式下載並保存到本地。

• inline 默認參數表示消息體會以頁面的一部分或者整個頁面的形式展現。
• attachment 消息體應該被下載到本地，將參數filename的值預填爲下載後的文件名

所以當咱們但願該資源被直接下載時候，咱們能夠設置返回頭Content-Disposition的值爲attachment。

//example
    Content-Disposition: attachment; filename="fname.ext"

這裏設置名稱時候，要注意下filename的編碼格式。

用戶本身在瀏覽器設置

瀏覽器既然定義了該行爲，根據瀏覽器的不一樣用戶可能在設置頁面去配置某些格式的文件是否但願瀏覽器去展現該文件。一些有爭議的狀況下，你也能夠提示用戶本身根據需求去設置這些參數。