2016-9-1 藍(lán)藍(lán)設(shè)計的小編
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，?請點(diǎn)這里
一、download屬性是個什么鬼？
首先看下面這種截圖
如果我們想實(shí)現(xiàn)點(diǎn)擊上面的下載按鈕下載一張圖片，你會如何實(shí)現(xiàn)？
我們可能會想到一個最簡單的方法，就是直接按鈕a標(biāo)簽鏈接一張圖片，類似下面這樣：
<a href="large.jpg">下載</a>
但是，想法雖好，實(shí)際效果卻不是我們想要的，因為瀏覽器可以直接瀏覽圖片，因此，我們點(diǎn)擊下面的“下載”鏈接，并是不下載圖片，而是在新窗口直接瀏覽圖片。
看我的眼睛,
于是，基本上，目前的實(shí)現(xiàn)都是放棄HTML策略，而是使用，例如php這樣的后端語言，通過告知瀏覽器header信息，來實(shí)
然而，這種前后端都要操心的方式神煩，現(xiàn)在都流行前后端分離，還攪在一起太累了，感覺不會再愛了。
那有沒有什么只需要前端動動指頭就能實(shí)現(xiàn)下載的方式呢？有，就是本文要介紹的download屬性。
例如，我們希望點(diǎn)擊“下載”鏈接下載圖片而不是瀏覽，直接增加一個download屬性就可以：
沒錯，你沒有看錯，就這么結(jié)束了，不妨點(diǎn)擊后面的鏈接試試：下載
結(jié)果在Chrome瀏覽器下（FireFox瀏覽器因為跨域限制無效）：
不僅如此，我們還可以指定下載圖片的文件名：
如果后綴名一樣，我們還可以缺省，直接文件名：
截圖為虛，操作為實(shí)：下載
Chrome下的截圖效果示意：
一個大寫的酷里！
然而，caniuse展示的兼容性只是個籠統(tǒng)，根據(jù)鄙人的實(shí)地測試，事情要比看到的復(fù)雜。
主要表現(xiàn)在跨域策略的處理上，由于我手上沒有IE13，所以，只能對比Chrome瀏覽器和FireFox瀏覽器：
如果需要下載的資源是跨域的，包括跨子域，在Chrome瀏覽器下，使用download屬性是可以下載的，但是，并不能重置下載的文件的命名；而FireFox瀏覽器下，則download屬性是無效的，也就是FireFox瀏覽器無論如何都不支持跨域資源的download屬性下載。
而，如果資源是同域名的，則兩個瀏覽器都是暢通無阻的下載，不會出現(xiàn)下載變?yōu)g覽的情況。
是否支持download屬性的監(jiān)測
要監(jiān)測當(dāng)前瀏覽器是否支持download屬性，一行JS代碼就可以了，如下：
除了圖片資源，我們還可以是PDF資源，或者txt資源等等。尤其Chrome等瀏覽器可以直接打開PDF文件，使得此文件格式需要download處理的場景越來越普遍。
此HTML屬性雖然非常實(shí)用和方便，但是兼容性制約了我們的大規(guī)模應(yīng)用。
同時考慮到很多時候，需要進(jìn)行一些下載的統(tǒng)計，純前端的方式想要保存下載量數(shù)據(jù)，還是有些吃緊，需要跟開發(fā)的同學(xué)配合才行，還不如使用傳統(tǒng)方法。
所以，download屬性的未來前景在哪里？當(dāng)下是否可以直接加入到實(shí)際項目？還需要我們一起好好想想。其實(shí)使用JS實(shí)現(xiàn)download屬性的polyfill并不難，但是，考慮到為何不所有瀏覽器都使用polyfill的方法，又覺得為了技術(shù)而技術(shù)是不太妥當(dāng)?shù)摹?
總之，先放著心上，再觀察觀察。
藍(lán)藍(lán)設(shè)計( tweetduck.com?)是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計?、 cs界面設(shè)計?、 ipad界面設(shè)計?、 包裝設(shè)計?、 圖標(biāo)定制?、 用戶體驗 、交互設(shè)計、?網(wǎng)站建設(shè)?、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com
