
Как сделать скачивание файла с сайта.
Не редкость когда нужно бывает создать ссылку для скачивания какого то файла. При этом желательно чтобы это была прямая ссылка для скачивания, а не на внешний сайт (облако, хранилище).
Для скачивания можно передавать файлы самых различных форматов: музыка, видео, текстовые файлы, 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>
Результат:
Если вам что то не понятно или есть какие либо вопросы - не стесняйтесь и задавайте их в комментариях.
очень понятная и наглядная статье для таких далеких, есть вопрос, как рядом поставить счетчик количества скачиваний
Счётчик количества скачиваний так просто одним HTML нельзя поставить. Тут уже нужно базу данных подключать и сервер. Это простейшая задача, но нужно понимать что делаешь.
понятно. файли лежат на облаке у меня. ну раз это проблема то плохо
ещё один вопрос ели можно, как сделать чтобы строчки ссылка отображались не одна за одной сверху вниз, в редакторе вроде код следующей ссылки под предыдущим на на яву один-за другим
Не понял ничего. Буквы знакомые, слова распознаваемые, а в куче текст - непонятная абракадабра.
Перефразируйте осмысленно - подскажу решение.
Если у облака есть счётчик, то возможно есть API, позволяющее отображать количество скачиваний.
я тоже об этом подумал. ну да ладно, не суть. а от с отображением ссылок не пойму, да и вообще хочу сделать так; (Название файла любое(не ссылка))-(Скачать файл(ссылка-)) или место ссылки Скачать файл Иконку, как вы описывали выше и что бы один под другим шло розмещение
В HTML тег
<p>
означает параграф. Это парный тег где есть открывающий и закрывающий теги.Вот так ссылки с новой строки:
С SVG-иконкой:
от как раз кошелечек и должен быть ссылкой, вернее кнопкой скачать. Иконка тестовые с базы, пока так учусь
Тогда вот так:
я что туплю, у меня же редактор стоит на странице сайта стоит, я вставляю что надо как пользователь а он генерирует ссылки в коде. И вас напряг и сам протормозил. Спасибо изветине
вотак и вышло
подскажите как сделать такой же выпадающий список авто для поиска нужного каталога как в примере https://avto-ok.info/
*** Авторизируйтесь чтобы писать комментарии.