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

Как сделать скачивание файла с сайта.

Не редкость когда нужно бывает создать ссылку для скачивания какого то файла. При этом желательно чтобы это была прямая ссылка для скачивания, а не на внешний сайт (облако, хранилище).

Для скачивания можно передавать файлы самых различных форматов: музыка, видео, текстовые файлы, Excel, архивы и мн. другие.

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

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

Делается это при помощи ссылки на файл с использованием специального HTML тега. Про то как создавать обычные ссылки есть статья: как сделать ссылку

Ниже пойдёт речь о том как сделать ссылку для скачивания файла.

Скачивание архивов

Для файлов-архивов (форматы zip, rar и т.д.) достаточно просто указать ссылку на файл который нужно передать для скачивания. Поэтому здесь применяется обычный HTML тег ссылки:

<a href="#">текст ссылки</a>

# - вместо символа решётки в атрибуте href прописывается ссылка на файл который отдаём для скачивания;

текст ссылки - можно указать текст типа: скачать файл, скачать прайс, скачать песню, скачать видео и т.д.

Так же хочу обратить внимание, что если файл с вашего сайта указываем относительный путь к файлу /music/pesnya.mp3, а со сторонних сайтов указываем полный путь https://inter-net.pro/music/pesnya.mp3

А вот для файлов не архивных форматов (музыка, видео, различные текстовые файлы и документы, изображения и т.д.) применяется специальный для этого тег.

HTML атрибут download

Для того, чтобы передать какой либо файл для скачивания пользователю, в HTML ссылки нужно прописать атрибут download.

Структура ссылки для скачивания в html строится следующим образом:

<a href="#" download="">текст ссылки</a>

Вместо знака решётки # указываем ссылку на файл передающийся для скачивания.

В атрибуте download ничего указывать не нужно. Браузер поймёт что файл нужно скачивать, а не открывать.

Со всплывающей подсказкой:

<a href="#" download="" title="">текст ссылки</a>

В кавычках атрибута title прописываем текст всплывающей подсказки.

*Обязательно не забываем переключить редактор в режим HTML чтобы редактировать теги

Текстовая ссылка

Код:

<a href="#" download="" title="всплывающая подсказка">скачать файл</a>

Результат: скачать файл

Скачать через кнопку

Код:

<a href="#" download="">
	<button>Скачать файл</button>
</a>

Результат:

Есть такой инструмент как Генератор кнопок, где просто генерировать кнопки с тегом скачивания и иконками.

Кнопка с иконкой

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

Код вставки иконки

 - пример для Font Awesome

 - пример для Icomoon

Код:

<a href="#" download="">
	<button>Скачать файл <i class="fas fa-download"></i></button>
</a>

Результат:

Скачивание файла при клике на изображение

Код:

<a href="#" download="">
	<img src="/images/knopki/skachat.png" alt="скачать"/>
</a>

Результат:

Со стилями CSS

Так же можно применять все свойства CSS и изменять размер шрифта, название, цвет и т.д.

Для этого добавляем атрибут style=" "

Код:

<a href="#" download="" style="font-size: 35px; color: red">Скачать файл</a>

Результат:

Скачать файл

Если вам что то не понятно или есть какие либо вопросы - не стесняйтесь и задавайте их в комментариях.

Записи по теме

Как сделать ссылку

Инструкция как делать ссылки: анкорные и безанкорные ссылки, ссылки в BB-кодах, ссылки открывающиеся в новой вкладке, ссылки на изображениях и т.д.

Онлайн экранирование кода для вставки в HTML

Данный инструмент позволяет на лету без перезагрузки страницы экранировать код для дальнейшей вставки его в HTML, заменяя в коде символы требующие обязательного экранирования для таких случаев. Это символы: < > & "

Спецсимволы в HTML

Комментарии 14

hono81

18:32 28.04.2020 #

очень понятная и наглядная статье для таких далеких, есть вопрос, как рядом поставить счетчик количества скачиваний

Inter-Net Pro

18:41 28.04.2020 #

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

hono81

20:00 28.04.2020 #

понятно. файли лежат на облаке у меня. ну раз это проблема то плохо

hono81

20:02 28.04.2020 #

ещё один вопрос ели можно, как сделать чтобы строчки ссылка отображались не одна за одной сверху вниз, в редакторе вроде код следующей ссылки под предыдущим на на яву один-за другим

Inter-Net Pro

20:12 28.04.2020 #

Не понял ничего. Буквы знакомые, слова распознаваемые, а в куче текст - непонятная абракадабра.

Перефразируйте осмысленно - подскажу решение.

Inter-Net Pro

20:08 28.04.2020 #

Если у облака есть счётчик, то возможно есть API, позволяющее отображать количество скачиваний.

hono81

20:13 28.04.2020 #

я тоже об этом подумал. ну да ладно, не суть. а от с отображением ссылок не пойму, да и вообще хочу сделать так; (Название файла любое(не ссылка))-(Скачать файл(ссылка-)) или место ссылки Скачать файл Иконку, как вы описывали выше и что бы один под другим шло розмещение

Inter-Net Pro

20:34 28.04.2020 #

В HTML тег  означает параграф. Это парный тег где есть открывающий и закрывающий теги.

<p>Текст..............</p>

Вот так ссылки с новой строки:

<p>Текст перед ссылкой <a href="https://example.com/fail.zip" download="">Текст ссылки</a></p>
<p>Текст перед второй ссылкой <a href="https://example.com/fail2.zip"  download="">Текст второй ссылки</a></p>

С SVG-иконкой:

<p>Текст перед ссылкой <a href="https://example.com/fail.zip" download="">
    <svg viewBox="0 0 512 512" width="21" height="21"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" /></svg> Текст ссылки</a>
</p>
<p>Текст перед второй ссылкой <a href="https://example.com/fail2.zip"  download="">
    <svg viewBox="0 0 512 512" width="21" height="21"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" /></svg> Текст второй ссылки</a>
</p>

hono81

20:44 28.04.2020 #

Скачать техническую документацию

hono81

20:45 28.04.2020 #

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

Inter-Net Pro

20:51 28.04.2020 #

Тогда вот так:

<p><img src="https://autodetal-ka.ru/image/catalog/logo-icon/dostavka.png" style="width: 110px;"> Скачать техническую документацию <a href="https://cloud.mail.ru/public/2hyq%2F2PkZSAZAQ" download=""><img src="https://autodetal-ka.ru/image/catalog/logo-icon/oplata.png" style="width: 110px;"></a></p>

hono81

21:07 28.04.2020 #

я что туплю, у меня же редактор стоит на странице сайта стоит, я вставляю что надо как пользователь а он генерирует ссылки в коде. И вас напряг и сам протормозил. Спасибо изветине

hono81

21:30 28.04.2020 #

Скачать "Закон о защите прав потребителей"

вотак и вышло

hono81

01:52 29.04.2020 #

подскажите как сделать такой же выпадающий список авто для поиска нужного каталога как в примере https://avto-ok.info/

*** Авторизируйтесь чтобы писать комментарии.