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

Как правильно сделать ссылку, чтобы при клике на неё начиналось скачивание файла. Атрибут download для HTML-тега ссылки. Примеры ссылок для скачивания.

скачать

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

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

  Для скачивания можно передавать файлы самых различных форматов: музыка, видео, текстовые файлы, 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>

Результат:

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


 

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

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

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

<i class="fa fa-download"></i> - пример для Font Awesome

<i class="icon-download"></i> - пример для 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, заменяя в коде символы требующие обязательного экранирования для таких случаев. Это символы: < > & "
Комментарии 17
18:32 28.04.2020 #

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

18:41 28.04.2020 #

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

20:00 28.04.2020 #

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

20:02 28.04.2020 #

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

20:12 28.04.2020 #

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

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

20:08 28.04.2020 #

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

20:13 28.04.2020 #

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

20:34 28.04.2020 #

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

<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>
20:44 28.04.2020 #

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

20:45 28.04.2020 #

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

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>
21:07 28.04.2020 #

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

21:30 28.04.2020 #

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

вотак и вышло

10:48 06.07.2021 #

а как сделать чтобы эта кнопка была ниже текста какой код нужен? то есть я текст написал но мне нада чтобы эта кнопка скачивания была в низу

10:07 01.09.2021 #

🙏🏻

10:08 01.09.2021 #

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

Подскажите, пожалуйста, как можно сделать скачивание файлов, после введения посетителем сайта определённого кода? При этом, это должен быть не один код, а несколько.

Объясню, для чего.

Человек покупает мой продукт. После этого получает цифровой код, к примеру такой: kr05jY369fK Другой человек покупает продукт и получает другой код и т. д..

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

Как это организовать?

10:08 01.09.2021 #

😊


*** чтобы писать комментарии.