Inter-Net.PRO
скачать файл

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

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

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

Результат:

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

 


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

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

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

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

<i class="icon-download"></i> - пример для Icomoon

Код:

<a href="#" download="">
	<button class="btn">Скачать файл <i class="fa 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>

 

Результат:

Скачать файл

 


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

 

Войдите чтобы комментировать

Dim Dim аватар Dim Dim ответил в теме 31 июль 2019 09:59 #1
Я сделал всё как велено, но на андроид фото не качается! Может, что-то пошло не так или надо чтоб кто-то другой скачивпл со своего устройства?
nordis аватар nordis ответил в теме 11 июнь 2019 11:31 #2
Сделал?
Расулбек Равупов аватар Расулбек Равупов ответил в теме 10 мая 2019 09:22 #3
здраствуйте ув админ как мне сделать кнопку скачать и добавит новости + перевязыт к свой хостинг чтоби людам по лёгкостю скачали рар и зип папки если не трудна естьвидео или какой нибуд инфо от 0 до конца как это сделать? вот мой сайт worldofwarcraft335a.uz/addoni/
Inter-Net PRO аватар Inter-Net PRO ответил в теме 21 март 2018 20:00 #4

Игорь Якимов пишет: Я продаю свои файлы

Извини, но все файлы уже проданы - остался только нелеквид в виде спама.
Могу скинуть оптом недорого.
Игорь Якимов аватар Игорь Якимов ответил в теме 21 март 2018 17:59 #5
Хочешь продать файлы?
Я продаю свои файлы на сайте [.....]
Закачал файл, получил ссылку для оплаты товара. Опубликовал ссылку на форуме или где-нибудь.
Люди заходят по ссылке и покупают. Всё автоматически.
Классный сайт! Самый удобный.

Авторизация

Войти через соцсети: