一、download屬性是個什么？

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

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

下載

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

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

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

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

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

那有沒有什么只需要前端動動指頭就能實現下載的方式呢？有，就是本文要介紹的download屬性。

例如，我們希望點擊“下載”鏈接下載圖片而不是瀏覽，直接增加一個download屬性就可以：

下載

沒錯，你沒有看錯，就這么結束了

結果在Chrome瀏覽器下(FireFox瀏覽器因為跨域限制無效)：

不僅如此，我們還可以指定下載圖片的文件名：

下載

如果后綴名一樣，我們還可以缺省，直接文件名：

下載

截圖為虛，操作為實

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屬性雖然非常實用和方便，但是兼容性制約了我們的大規模應用。

總結

以上是生活随笔為你收集整理的html5属性详解,HTML5中的download属性详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。