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

Атрибут download используется для скачивания с сайта файлов, которые указаны в ссылке:

Подробно об атрибуте download

1. Использование атрибута download в скачивании файлов.
2. Использование атрибута download в тегах.

Использование атрибута download в скачивании файлов.

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

Давайте потренируемся на картинке... в качестве физического файла(не будем подробно останавливаться на всех нюансах - см. здесь), у нас есть адрес на картинку :

//dwweb.ru/__img/__svg/bell/bell_81.svg

Давайте посмотрим, а существует ли данная картинка? Помещаем адрес картинки в атрибут src тега img:

<img width="100px" src="//dwweb.ru/__img/__svg/bell/bell_81.svg">

Разместим нашу картинку прямо здесь:



Отлично!

Мы убедились, что файл реальный! Теперь берем тот адрес, что принадлежит изображению и помещаем его в атрибут href ссылки, между тегами пишем скачать "Скачать с помощью атрибута download"

<a download href="//dwweb.ru/__img/__svg/bell/bell_81.svg">Скачать с помощью атрибута download </a>

Результат использования атрибута download для скачивания файла:

Для того, чтобы атрибут download сработал - нажмите по ниже идущей ссылке:

Скачать с помощью атрибута download



Использование атрибута download оборачивая ссылкой.

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

Для других тегов использование атрибута download

К сожалению - так это не будет работать... и любыми другими аналогичными способами никак... нужно обернуть данный "вывод на экран" ссылкой.

<img src="//dwweb.ru/__img/__svg/bell/bell_81.svg" download>

Оборачиваем ссылкой с атрибутом download

Давайте, чтобы далеко не ходить разместим атрибута\ download в теге img...

Некоторое количество кода возьмем из предыдущего пункта. нам понадобится:

Атрибут img.

Ссылка на файл, в данном случае это изобр.

//dwweb.ru/__img/__svg/bell/bell_81.svg

Его опять помещаем в атрибут src

Оборачиваем все это дело ссылкой

Чтобы убрать подчеркивание, нам потребуется → attribute style + border none + text-decoration:none

Соберем весь получившийся код с использованием атрибута download:

<a href="//dwweb.ru/__img/__svg/bell/bell_81.svg" download style="border:none;text-decoration:none;"><img style="width:100px" src="//dwweb.ru/__img/__svg/bell/bell_81.svg"></a>

Результат работы атрибута download

Нажмите, чтобы проверить работу "атрибута download"




Ещё пример использования атрибута download

Что-то похожее, но с выводом информации о скачивании. Подробнее здесь