HTML HTML5中的download屬性

2021-08-13 19:51:24 字數 954 閱讀 3491

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

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

如果字尾名一樣,我們還可以預設,直接檔名:

乙個大寫的酷裡!

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

主要表現在跨域策略的處理上,由於我手上沒有ie13,所以,只能對比chrome瀏覽器和firefox瀏覽器:

是否支援download屬性的監測

要監測當前瀏覽器是否支援download屬性,一行js**就可以了,如下:

var issupportdownload = 'download' in document.createelement('a');

除了資源,我們還可以是pdf資源,或者txt資源等等。尤其chrome等瀏覽器可以直接開啟pdf檔案,使得此檔案格式需要download處理的場景越來越普遍。

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

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

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

補充於2017-07-04

了解HTML HTML5中的download屬性

一 download屬性是個什麼鬼?1看我的眼睛,12 然而,這種前後端都要操心的方式神煩,現在都流行前後端分離,還攪在一起太累了,感覺不會再愛了。11 如果字尾名一樣,我們還可以預設,直接檔名 1乙個大寫的酷裡!然而,caniuse展示的相容性只是個籠統,根據鄙人的實地測試,事情要比看到的複雜。主...

15本值得閱讀的HTML HTML5入門書籍

如果你想學網路設計與開發,需要做的第一步是學習超文字標記語言 即html 它是一種用於建立網頁單元的標記語言。要獲得編制html元素的技巧,你並不一定需要在某著名的it院校裡經過正式的課堂訓練。你可以認真自學網上教材,比如w3schools和tizag.com,或者你還可以閱讀html書籍,如果你想...

Extjs4中up 和down 的用法

extjs4.x中,每個元件都新增加了兩個方法up 和down 方法。這兩個方法都是用來獲取元件的,下面我們來看下up 方法和down 方法的官方解釋。extjs4.x中,新增加了兩個方法up 和down 方法。這兩個方法都是用來獲取元件的,下面我們來看下官方解釋。up string selecto...