一、download屬性是個(gè)什么？

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

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

下載

但是，想法雖好，實(shí)際效果卻不是我們想要的，因?yàn)闉g覽器可以直接瀏覽圖片，因此，我們點(diǎn)擊“下載”鏈接，并是不下載圖片，而是在新窗口直接瀏覽圖片。

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

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

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

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

那有沒有什么只需要前端動(dòng)動(dòng)指頭就能實(shí)現(xiàn)下載的方式呢？有，就是本文要介紹的download屬性。

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

下載

沒錯(cuò)，你沒有看錯(cuò)，就這么結(jié)束了

結(jié)果在Chrome瀏覽器下(FireFox瀏覽器因?yàn)榭缬蛳拗茻o效)：

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

下載

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

下載

截圖為虛，操作為實(shí)

Chrome下的截圖效果示意：

一個(gè)大寫的酷里！

二、瀏覽器兼容性和跨域策略

然而，caniuse展示的兼容性只是個(gè)籠統(tǒng)，根據(jù)鄙人的實(shí)地測試，事情要比看到的復(fù)雜。

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

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

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

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

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

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

三、結(jié)束語

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。