HTML/HTML5中的download屬性
一、download屬性是個什麼鬼？
首先看下面這種截圖：
如果我們想實現點擊上面的下載按鈕下載一張圖片，你會如何實現？
我們可能會想到一個最簡單的方法，就是直接按鈕a標籤鏈接一張圖片，類似下面這樣：
<a href="large.jpg">下載</a>
但是，想法雖好，實際效果卻不是我們想要的，因爲瀏覽器可以直接瀏覽圖片，因此，我們點擊下面的“下載”鏈接，並是不下載圖片，而是在新窗口直接瀏覽圖片。
看我的眼睛，
於是，基本上，目前的實現都是放棄HTML策略，而是使用，例如php這樣的後端語言，通過告知瀏覽器header信息，來實現下載。
header('Content-type: image/jpeg');
header("Content-Disposition: attachment; filename='download.jpg'");
然而，這種前後端都要操心的方式神煩，現在都流行前後端分離，還攪在一起太累了，感覺不會再愛了。
那有沒有什麼只需要前端動動指頭就能實現下載的方式呢？有，就是本文要介紹的download屬性。
例如，我們希望點擊“下載”鏈接下載圖片而不是瀏覽，直接增加一個download屬性就可以：
<a href="large.jpg" download>下載</a>
沒錯，你沒有看錯，就這麼結束了，不妨點擊後面的鏈接試試：下載
結果在Chrome瀏覽器下（FireFox瀏覽器因爲跨域限制無效）：
不僅如此，我們還可以指定下載圖片的文件名：
<a href="index_logo.gif" download="_5332_.gif">下載</a>
如果後綴名一樣，我們還可以缺省，直接文件名：
<a href="index_logo.gif" download="_5332_">下載</a>
截圖爲虛，操作爲實：下載
Chrome下的截圖效果示意：
一個大寫的酷裏！
二、瀏覽器兼容性和跨域策略
然而，caniuse展示的兼容性只是個籠統，根據鄙人的實地測試，事情要比看到的複雜。
主要表現在跨域策略的處理上，由於我手上沒有IE13，所以，只能對比Chrome瀏覽器和FireFox瀏覽器：
如果需要下載的資源是跨域的，包括跨子域，在Chrome瀏覽器下，使用download屬性是可以下載的，但是，並不能重置下載的文件的命名；而FireFox瀏覽器下，則download屬性是無效的，也就是FireFox瀏覽器無論如何都不支持跨域資源的download屬性下載。
而，如果資源是同域名的，則兩個瀏覽器都是暢通無阻的下載，不會出現下載變瀏覽的情況。
是否支持download屬性的監測
要監測當前瀏覽器是否支持download屬性，一行JS代碼就可以了，如下：
var isSupportDownload = 'download' in document.createElement('a');
三、結束語
除了圖片資源，我們還可以是PDF資源，或者txt資源等等。尤其Chrome等瀏覽器可以直接打開PDF文件，使得此文件格式需要download處理的場景越來越普遍。
此HTML屬性雖然非常實用和方便，但是兼容性制約了我們的大規模應用。
同時考慮到很多時候，需要進行一些下載的統計，純前端的方式想要保存下載量數據，還是有些喫緊，需要跟開發的同學配合纔行，還不如使用傳統方法。
所以，download屬性的未來前景在哪裏？當下是否可以直接加入到實際項目？還需要我們一起好好想想。其實使用JS實現download屬性的polyfill並不難，但是，考慮到爲何不所有瀏覽器都使用polyfill的方法，又覺得爲了技術而技術是不太妥當的。
總之，先放着心上，再觀察觀察。
補充於2017-07-04
如果需求是直接使用JS觸發瀏覽器的下載，可以看看這篇文章：“使用JS讓文本字符串作爲html或JSON文件下載”。