一、download屬性是個什么？

如果我們想實現(xiàn)點擊上面的下載按鈕下載一張圖片，你會如何實現(xiàn)？

我們可能會想到一個最簡單的方法，就是直接按鈕a標簽鏈接一張圖片，類似下面這樣：

<a href="large.jpg"下載</a

但是，想法雖好，實際效果卻不是我們想要的，因為瀏覽器可以直接瀏覽圖片，因此，我們點擊“下載”鏈接，并是不下載圖片，而是在新窗口直接瀏覽圖片。

于是，基本上，目前的實現(xiàn)都是放棄HTML策略，而是使用，例如php這樣的后端語言，通過告知瀏覽器header信息，來實現(xiàn)下載。

header('Content-type: image/jpeg');

header("Content-Disposition: attachment; filename='download.jpg'");

然而，這種前后端都要操心的方式神煩，現(xiàn)在都流行前后端分離，還攪在一起太累了，感覺不會再愛了。

那有沒有什么只需要前端動動指頭就能實現(xiàn)下載的方式呢？有，就是本文要介紹的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展示的兼容性只是個籠統(tǒng)，根據(jù)鄙人的實地測試，事情要比看到的復雜。

主要表現(xiàn)在跨域策略的處理上，由于我手上沒有IE13，所以，只能對比Chrome瀏覽器和FireFox瀏覽器：

如果需要下載的資源是跨域的，包括跨子域，在Chrome瀏覽器下，使用download屬性是可以下載的，但是，并不能重置下載的文件的命名；而FireFox瀏覽器下，則download屬性是無效的，也就是FireFox瀏覽器無論如何都不支持跨域資源的download屬性下載。

而，如果資源是同域名的，則兩個瀏覽器都是暢通無阻的下載，不會出現(xiàn)下載變?yōu)g覽的情況。

是否支持download屬性的監(jiān)測

要監(jiān)測當前瀏覽器是否支持download屬性，一行JS代碼就可以了，如下：

var isSupportDownload = 'download' in document.createElement('a');

三、結束語

除了圖片資源，我們還可以是PDF資源，或者txt資源等等。尤其Chrome等瀏覽器可以直接打開PDF文件，使得此html' target='_blank'>文件格式需要download處理的場景越來越普遍。

此HTML屬性雖然非常實用和方便，但是兼容性制約了我們的大規(guī)模應用。

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。