Руководство по атрибуту HTML5 Download

Руководство по атрибуту HTML5 Download

От автора: Атрибут download позволяет нам заставлять компьютер или мобильное устройство пользователя загружать медиа файлы.

Давайте детальнее познакомимся с атрибутом download в HTML5.

скачать исходникидемо

Итак, атрибут download позволяет нам заставлять компьютер или мобильное устройство пользователя загружать медиа файлы. Например:

<a href="htmldoc.html" download>Download HTML document</a>

Обычно, когда мы ставим ссылку на HTML документ, PDF, файл изображения или другие медиа файлы, они открываются в браузере, когда пользователь переходит по ссылке.

Но если гиперссылка содержит атрибут download, такой как в примере выше, то браузер полуучает инструкции загружать файл, таким же образом, как и если ссылка указывает на файл .zip или .exe.

Атрибут download откроет диалог “Сохранить”, в браузере Firefox, давая пользователю возможность сохранить файл на компьютер или мобильное устройство.

Атрибут download отлично подходит для файлов PDF, изображений, видео и аудио клипов, и другого медиа контента, который бы ваши пользователи сохраняли на свои устройства.

Изменение имени файла

Вы можете изменить имя загружаемого файла, задав значение атрибуту download. Например:

<a href="tform5201.pdf" download="visa-application.pdf">

Определение Поддержки Атрибута Download

Так как, многие браузеры до сих пор не реализовали атрибут download, испольование JavaScript для проверки поддержки браузером, будет мудрым решением

// create temporary hyperlink element
var hyperlink = document.createElement("a");

// if download property is undefined
// browser doesn't support the feature
if(hyperlink.download === undefined) {
  // do stuff
}

На демо странице, если атрибут download отсутсвует в браузере, то показывается модальное окно с сообщением, говорящим пользователю об отсутствии поддержки.

Safari на данный момет не поддерживает атрибут download и модальное окно информирует об этом пользователя

Статус реализации

На момент написания, атрибут download поддерживается в последних версиях следующих браузеров:

Firefox/Firefox для Android

Chrome/Chrome для Android

Opera/Opera Mobile

Нативный браузер Android

Нативный браузер Blackberry

Текущий статус реализации можно посмотреть в следующей таблице на сайте caniuse.com. Также, сверьтесь со спецификацией W3C.

Автор: Jacob Gube

Источник: http://sixrevisions.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. AlexSS

    А можно к этому атрибуту написать javascript код, с помощью которого можно было сохранять текст со страницы?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree