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

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

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

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

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

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

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

 

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

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

<a href="#">текст ссылки</a>
  • # - вместо символа решётки в атрибуте href прописывается ссылка на файл который отдаём для скачивания;
  • текст ссылки - можно указать текст типа: скачать файл, скачать прайс, скачать песню, скачать видео и т.д.

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

 

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

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

Код:

<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-кодах, ссылки открывающиеся в новой вкладке, ссылки на изображениях и т.д.
Ссылка на страницу PDF
Ссылка на страницу PDF Инструкция как сделать ссылку на заданную страницу PDF файла, чтобы PDF-файл открывался сразу на нужной странице. Для этого в ссылке нужно через хэш указать ключ page и его значением указать номер страницы...
Комментарии 13
hono81
hono81
15:32 28.04.2020 #

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

Admin
Admin
15:41 28.04.2020 #

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

hono81
hono81
17:00 28.04.2020 #

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

hono81
hono81
17:02 28.04.2020 #

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

Admin
Admin
17:12 28.04.2020 #

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

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

Admin
Admin
17:08 28.04.2020 #

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

hono81
hono81
17:13 28.04.2020 #

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

Admin
Admin
17: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>
STAS
STAS
07:48 06.07.2021 #

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

Polina_V
Polina_V
07:07 01.09.2021 #

🙏🏻

Polina_V
Polina_V
07:08 01.09.2021 #

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

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

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

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

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

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

Polina_V
Polina_V
07:08 01.09.2021 #

😊

oggi55555
oggi55555
14:04 10.11.2021 #

Друзья, подскажите! В облачном хранилище лежит PDF файл. На него имеется прямая ссылка. Ссылка закодирована в QR код. Задача! Считать ссылку QR сканером телефона и PDF картинка должна открыться в любом имеющемся браузере телефона на весь экран, без каких либо дальнейших действий со стороны сканирующего!!! Что бы никаких вопросов типа закачать или открыть. Кто подскажет как?

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