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