簡述HTML5的下載屬性
你是如何在網(wǎng)頁上下載文件的呢?是不是想人們習(xí)慣中的那樣,點(diǎn)擊鼠標(biāo)右鍵的“另存為”命令。原因有以下幾點(diǎn):
1、人們往往不清楚直接點(diǎn)擊是打開文件還是下載,
2、直接打開文件會遇到幾個問題:
1)打開大文件例如pdf時較慢;
2)大文件例如圖像或者pdf的渲染容易造成瀏覽器崩潰;
3)打開文件有可能展示文件內(nèi)容,例如bt種子,而其實(shí)這和我們的目的完全南轅北轍。
但是這種方式非常麻煩,很不直觀,偏離了用戶最便捷和最初的認(rèn)知。我們可以想象一下向一位年紀(jì)較大的用戶教育用這種方式來下載文件的場景,非常麻煩。而且很多用戶不習(xí)慣和害怕使用鼠標(biāo)右鍵。
現(xiàn)在HTML5增加了download下載屬性來改變這件事。它可以這樣使用:
<ahrefahref="hugemothereffinpdf.pdf"download>Downloadfile</a>
通過這個屬性瀏覽器會讓此文件通過下載方式處理。也可以給屬性一個值做為下載文件名,形如:
download="filename"
目前此屬性已經(jīng)在Chrome 14+和Firefox 20+以上瀏覽器得到支持,你可以采用如下的方式測試瀏覽器是否支持下載屬性:
if('download'in document.createElement('a')) //supported
要特別說明的是,在Firefox中必須要為文件指定文件類型,而Chrome則不需要。例如Firefox必須要設(shè)定download="filename.txt"。
IE9之前版本的IE瀏覽器可以采用條件注釋作為降級的方式處理。
<!--[if IE]><p>Rightclick and save as.</p><![endif]-->
當(dāng)然,我們也可以通過在服務(wù)器端配置的方式來強(qiáng)迫文件下載,但是這種方式比起網(wǎng)頁端HTML5的解決方案更復(fù)雜,也沒有這么靈活。網(wǎng)頁端HTML5的出現(xiàn)為我們很多時候都提供了較為便捷的方式,在日后的發(fā)展中也將占據(jù)更為重要的位置。