Как использовать атрибут 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
Просмотров: 25355
Правила перепечатки

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Апреля 2013 20:11
    vitaliykoreev
    Спасибо большое! Хотя еще не во всех браузерах возможно сделать, но минус один скрипт в сайте=) Очень удобный атрибут!)
  • 26 Апреля 2013 23:51
    Nickola75
    Спасибо!
  • 27 Апреля 2013 02:13
    igontarev
    побольше бы по html5 статей, спасибо!
    • 27 Апреля 2013 09:51
      vitaliykoreev
      поддерживаю! Побольше бы по html5 статей.
  • 27 Апреля 2013 12:46
    micha
    Даешь Курс пр HTML5!!!
  • 27 Апреля 2013 14:08
    Jounsy
    Прикольно и удобно. Спасибки
  • 28 Апреля 2013 05:49
    mccrush
    Откуда вас столько ленивых берется? Десятки книг написано и переведено на русский язык. Оторвите свои пяты точки и сходите в ближайший книжный. В районе 500 р. приобретете разжованный мануал с примерами по HTML 5 & CSS 3.
    • 5 Мая 2013 02:16
      max123456789
      Так а сам чего тут тусуешься? ))
    • 24 Июня 2013 20:45
      molegx
      Работа над HTML5 будет закончена в 2022 году, каждый год в язык вводят новые возможности, я говорю к тому что, не обязательно покупать книгу, можно её найти в интернете почитать онлайн или скачать, а так же почитать статьи по HTML5 можно и на зарубежных сайтах или ждать их на нашем ruseller. А тратить деньги сейчас и через год, два купить новую редакцию снова и снова... В общем, дело каждого...
^ Наверх ^