Как использовать атрибут download

Как использовать атрибут download

HTML 5 принёс много приятных сюрпризов, в числе которых новые типы input-ов и атрибуты для форм. Как это часто бывает, те основные дополнения или даже незначительные изменения остаются неясными, и я думаю к этому числу можно отнести и атрибут download.
атрибут download
Вы наверное не раз встречались с ситуацией когда браузер не загружает автоматически те или иные типы файлов. Это могут быть изображения, другие веб-страницы или иногда в зависимости от настроек браузера, файлы — PDF. Так вот, атрибут download, указывает браузеру на автоматическую закачку файлов без необходимости открывать их в новом окне.

Использование атрибута download

Поскольку атрибут download не использует никаких скриптов, достаточно просто добавить атрибут к ссылке:

<a href="myFolder/myImage.png" download>Download image</a>

Что ещё удобно в этом атрибуте, что вы можете даже установить имя для загружаемого файла, даже если это не имя файла на вашем сервере. Это очень удобно для сайтов со сложными именами файлов, или даже динамически созданных картинок, которые должны иметь удобное и просто название.
Прописать имя, вы можете просто добавив знак равенства, за которым следует указать нужное имя файла в кавычках:

<a href="myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>

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

Поддержка браузеров

В настоящее время только 14 + Chrome и Firefox 20 + поддерживают атрибут download, так что вам возможно придется прибегнуть к простому скрипту, что бы проверить поддерживается ли атрибут или нет.

var a = document.createElement('a');

if(typeof a.download != "undefined")
{
   // download attribute is supported
}
else
{
  // download attribute is not supported
}

Итог

Принимая во внимание все, что было добавлено в HTML 5, атрибут download является очень незначительной частью, но на мой взгляд, это то что давно просилось на свет.

comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter