Как сделать ссылку для скачивания файла

Привет! Довольно многие, по статистике Яндекса, задаются вопросом о том, как сделать ссылку для скачивания файла.

Почему возникает подобный вопрос? Дело в том, что браузеры, и в частности Яндекс-браузер, самостоятельно открывают многие типы файлов, например pdf, при обращении к ним посредством ссылки на странице сайта.

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

Очень просто делается такая ссылка, с помощью магического HTML5-заклинания download 🙂

Давай сотворим два варианта: текстовую ссылку и в виде картинки/кнопки. Пусть будет большая картинка, на которую приятно смотреть и мечтать. Вид кнопки меняется по своему усмотрению, можно взять из того же Bootstrap-а вот здесь, если он используется в вёрстке.

Текстовая ссылка для скачивания

Пишем ссылку и добавляем атрибут download:

<a href="путь_до_файла/название_файла.jpg" title="Скачать фото заката в Сочи" download>Скачать фото заката в Сочи</a>

Пример:

Скачать фото заката в Сочи (нажми, чтобы скачать)

Ссылка для скачивания — картинка

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

<a href="путь_до_файла/назвние_файла" download>
   <img src="путь_до_файла/назвние_файла" title="Мальдивы фото">
</a>

Пример:

Закат в Сочи (нажми, чтобы скачать):

Мальдивы (нажми, чтобы скачать):

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

Музыкальное сопровождение к этой записи: Back to Soul — Triangle Sun