他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

了解HTML/HTML5中的download屬性

2016-9-1    藍藍設計的小編

如果您想訂閱本博客內容,每天自動發到您的郵箱中,?請點這里 

一、download屬性是個什么鬼?

首先看下面這種截圖

1.png

 

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

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

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

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

下載

看我的眼睛,

2.gif

 

于是,基本上,目前的實現都是放棄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下的截圖效果示意:

5.png


 

一個大寫的酷里!

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

然而,caniuse展示的兼容性只是個籠統,根據鄙人的實地測試,事情要比看到的復雜。

主要表現在跨域策略的處理上,由于我手上沒有IE13,所以,只能對比Chrome瀏覽器和FireFox瀏覽器:

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

而,如果資源是同域名的,則兩個瀏覽器都是暢通無阻的下載,不會出現下載變瀏覽的情況。

7.png


 

是否支持download屬性的監測
要監測當前瀏覽器是否支持download屬性,一行JS代碼就可以了,如下:

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

三、結束語

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

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

同時考慮到很多時候,需要進行一些下載的統計,純前端的方式想要保存下載量數據,還是有些吃緊,需要跟開發的同學配合才行,還不如使用傳統方法。

所以,download屬性的未來前景在哪里?當下是否可以直接加入到實際項目?還需要我們一起好好想想。其實使用JS實現download屬性的polyfill并不難,但是,考慮到為何不所有瀏覽器都使用polyfill的方法,又覺得為了技術而技術是不太妥當的。

總之,先放著心上,再觀察觀察。

 

藍藍設計ssll180.com?)是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計?、 cs界面設計?、 ipad界面設計? 包裝設計?、 圖標定制?、 用戶體驗 、交互設計、?網站建設?、平面設計服務 

 

日歷

鏈接

個人資料

藍藍設計的小編 http://ssll180.com

存檔