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

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

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

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

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

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

Код:


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *