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

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

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


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

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

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

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


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

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

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

  • # - вместо этого символа прописывается ссылка на файл который отдаём для скачивания;
  • текст ссылки - можно указать текст типа: скачать файл, скачать прайс, скачать песню, скачать видео и т.д.

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

 


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

HTML тег скачать - download

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

 

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

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

 

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

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

 

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


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

Код:

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

Результат:

скачать файл


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

Код:

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

Результат:


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

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

Код вставки иконки <i class="icon-download"></i>

Код:

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

Результат:


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

Код:

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

Результат:

скачать


Со стилями CSS

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

Для этого вставляем тег <span style=""></span>

Код:

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

 

Результат:

Скачать файл

 


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

 

Добавить комментарий

Для того чтобы ваши комментарии появлялись мгновенно (без модерации), авторизируйтесь или пройдите регистрацию на сайте. Комментарии добавленные анонимно добавляются только после модерации, из-за большого количества спама.

Защитный код
Обновить