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文件下載”。