怎樣去掌握瀏覽器對資本文件的處置懲罰行動

瀏覽器是怎樣處置懲罰文件鏈接的

平常當用戶翻開一個資本的url,假如瀏覽器支撐這個花樣的文件的情況下,瀏覽器會嘗試去再頁面里展現它而不是直接下載。比方一張圖片(jpg, png, gif等),險些一切瀏覽器都邑去將圖片在瀏覽器內里展現。

《怎樣去掌握瀏覽器對資本文件的處置懲罰行動》

關於緊縮花樣的文件(zip, tar, gzip等)瀏覽器總是會直接去下載它們,別的一些花樣的文件,依據瀏覽器的差別也會有差別的處置懲罰要領,比方Microsoft Word文件(doc, docx)在ie瀏覽器下平常會在瀏覽器中展現,然則其他瀏覽器險些都邑直接下載它,一樣的關於PDF文件chrome有本身的pdf 轉換器它會嘗試去在瀏覽器上展現該文件。

強迫下載文件

關於瀏覽器這類行動,平常情況下是能夠接收的,由於用戶能夠在瀏覽器显示文件后將文件保存到電腦中,然則一些情況下用戶能夠願望文件直接被下載而不是在瀏覽器中被翻開,比方有時刻用戶想去下載一個歌曲,然則瀏覽器能夠歸去播放該音頻。那末怎樣讓瀏覽器強迫去下載文件要怎樣做呢

a標籤的download屬性

html5a 標籤新增了 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的編碼花樣。

用戶本身在瀏覽器設置

瀏覽器既然定義了該行動,依據瀏覽器的差別用戶能夠在設置頁面去設置某些花樣的文件是不是願望瀏覽器去展現該文件。一些有爭議的情況下,你也能夠提醒用戶本身依據需求去設置這些參數。

    原文作者:x!!!
    原文地址: https://segmentfault.com/a/1190000015430643
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞