Заметка: использование HTML5 атрибута "download"
Russian (Pусский) translation by Aleksandr Dokin (you can also view the original English article)
Создать ссылку на скачивание в HTML довольно просто; Добавляете тег <a> и в атрибуте href
указываете путь к файлу. Однако, некоторые типы файлов (например изображения, .pdf, .txt, и .doc) не будут скачиваться. Вместо этого они откроются в браузере.
Существуют решения, которые можно использовать, если у вас есть серверный доступ к сайту, например настройка .htaccess
для скачивания этих файлов напрямую. Если ваш сайт размещен на бесплатных площадках, таких как WordPress.com, Blogspot или Github, которые не позволяют этого сделать - следует использовать атрибут download
.
Использование атрибута "Download"
Атрибут download
является частью спецификации HTML5 и определяет ссылку именно как ссылку на скачивание, а не навигационную.
Он также позволяет переименовать файл после скачивания. Файл, находящийся на сервере, особенно если он создается автоматически, может называться например так acme-doc-2.0.1.txt
. Но для пользователей было бы лучше скачивать файл с более разумным именем, возможно таким: Acme Documentation (ver.
2.0.1).txt
(не забываем расширение файла).
Вот как это будет выглядеть:
1 |
<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a> |
Попробуйте скачать файл с этой страницы, он должен скачаться с названием, которое указано в атрибуте download
.



Несколько замечаний:
- Firefox разрешает загрузку файлов лишь с текущего источника (same origin), заботясь о безопасности. Файл должен приходить именно с вашего сервера или домена, в противном случае он будет открыт в браузере.
- Пока загрузка cross-origin файлов поддерживается в Chrome и последней версии Opera (с Chromium/Blink), эти браузеры проигнорируют значение атрибута. Другими словами, имя файла останется неизменным.
Обеспечиваем Fallback
На время написания этой статьи поддержки атрибута download
еще не было в Safari и (как можно было ожидать) в Internet Explorer. Cогласно modern IE status, эта фича в настоящее время находится в верхней части списка разработки и получает много голосов.



Тем временем, мы можем добавить неплохой запасной вариант (fallback) для браузеров, которые не поддерживают этот атрибут - показывать дополнительные инструкции под ссылкой на скачивание. Чтобы это сделать, нам нужно скачать Modernizr с включенным тестом на поддержку атрибута download
.



Затем мы можем добавить следующий скрипт.
1 |
if ( ! Modernizr.adownload ) { |
2 |
var $link = $('a'); |
3 |
|
4 |
$link.each(function() { |
5 |
var $download = $(this).attr('download'); |
6 |
|
7 |
if (typeof $download !== typeof undefined && $download !== false) { |
8 |
var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"'); |
9 |
$el.insertAfter($(this)); |
10 |
}
|
11 |
|
12 |
});
|
13 |
}
|
Скрипт проверит, поддерживает ли браузер данный атрибут; если нет - то под всеми ссылками с указанным download
атрибутом будет добавлен новый <div>
с подсказкой.



Подводя итог
Атрибут download
делает обработку ссылок на скачивание очень удобным для тех, кто не имеет доступа к серверным настройкам. С нетерпением жду, что Internet Explorer и Safari скоро реализуют поддержку атрибута download
!