瀏覽器是怎樣處置懲罰文件鏈接的
平常當用戶翻開一個資本的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
的編碼花樣。
用戶本身在瀏覽器設置
瀏覽器既然定義了該行動,依據瀏覽器的差別用戶能夠在設置頁面去設置某些花樣的文件是不是願望瀏覽器去展現該文件。一些有爭議的情況下,你也能夠提醒用戶本身依據需求去設置這些參數。