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

HTML5 очень сильно отличается от предыдущих версий: в нём появилось множество новых элементов и атрибутов. Сегодня мы поговорим об атрибуте download.

В зависимости от настройки вашего бразуера, многие форматы файлов не отдаются на автоматическую скачку: изображения, другие веб страницы, в некоторых случаях PDF-ки. Благодаря атрибуту download, мы можем исправить эту ситуацию без лишних скриптов. Этот приём может быть очень полезен для сайтов-хранилищ для загрузки и скачки файлов.

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

Поскольку для нужного нам эффекта не нужно писать никаких скриптов, просто добавляем к элементу ещё один атрибут:

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

Что действительно круто, так это то, что мы можем задать имя скачиваемому файлу. Это очень удобно, особенно если это нужно делать динамически. Для этого просто в атрибут download нужно прописать какое-то значение:

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

Кстати говоря, в названии нам не обязательно указывать формат файла, он выставится автоматом.

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

К сожалению, пока что данный атрибут работает только в Chrome 14+ и Firefox 20+, так что нам всё-таки нужно предусмотреть и это. К примеру, таким образом:

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

if(typeof a.download != "undefined")
{
   // атрибут поддерживается браузером
}
else
{
  // атрибут не поддерживается браузером
}

Вывод

По сравнению с тем, что было добавлено в HTML5, атрибут download - это лишь капля в море, но мне кажется, это очень полезная фишка, которая значительно упрощает задачи, связанные с скачиванием файлов.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.webdesignerdepot.com/2013/04/how-to-use-the-download-attribute/
Перевел: Станислав Протасевич
Урок создан: 26 Апреля 2013
Просмотров: 27093
Правила перепечатки

5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^