Чтобы ссылка на сайте скачивала файл, а не открывала его в браузере, добавьте к тегу <a> атрибут download: <a href="files/price.pdf" download>Скачать прайс</a>. Файл должен лежать на том же домене, что и страница. Если его хранят на чужом сервере, атрибут не сработает.
Сайта нет и нужно просто передать файл человеку? Загрузите его на Яндекс Диск или Google Диск, включите доступ по ссылке и отправьте адрес. Ниже оба способа по шагам, плюс кнопка «Скачать» на JavaScript и настройка сервера. Если тег <a> для вас пока новинка, начните с разбора что такое гиперссылка и как её сделать.
CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как сделать ссылку для скачивания файла в HTML
Понадобится сам файл и HTML-страница, на которой будет ссылка. Если страницы ещё нет, вот инструкция, как создать HTML-файл index.html в любом редакторе.
- Положите файл в папку сайта, например в
files/рядом сindex.html. - Добавьте на страницу ссылку с путём к файлу в атрибуте
href(как устроен сам тег a и его атрибуты, мы разобрали отдельно). - Допишите к ссылке атрибут
downloadбез значения. - Откройте страницу в браузере и нажмите на ссылку: файл уйдёт в папку загрузок.
<a href="files/price-2026.pdf" download>Скачать прайс (PDF, 240 КБ)</a>Без download браузер сам решает, что делать. PDF, картинки, текст и HTML он покажет во вкладке, а архив или таблицу CSV скачает. С атрибутом браузер скачивает файл любого типа, в том числе PDF и саму HTML-страницу.
Подписывайте формат и размер прямо в тексте ссылки. В справочнике MDN по тегу <a> советуют показывать у ссылки на скачиваемый файл, что произойдёт после клика.
Как задать имя скачанного файла
Значение атрибута становится именем файла на компьютере пользователя. На сервере файл может называться как угодно.
<a href="files/p-2026-10.pdf" download="Прайс-лист.pdf">Скачать прайс</a>Символы / и \ в имени браузер заменит на подчёркивания. Так описано в том же справочнике MDN. Ссылка с download="2026/10/отчёт.csv" сохранит файл как 2026_10_отчёт.csv, а не создаст папки.
Когда атрибут download не срабатывает
Ограничения атрибута перечислены в справочнике MDN. Чаще всего мешает первое: файл лежит на другом домене.
| Ситуация | Что произойдёт | Что делать |
|---|---|---|
| Файл на чужом домене или поддомене (CDN, облако) | Атрибут игнорируется: PDF и картинки откроются во вкладке, имя из download не применится |
Перенести файл на свой домен или настроить заголовок на сервере, где он лежит |
Сервер отдаёт заголовок Content-Disposition с параметром filename |
Файл скачается, но с именем из заголовка | Поменять имя в настройках сервера, а не в HTML |
Ссылка ведёт на blob: или data: |
Работает: для data: всегда, для blob:, если адрес создан на том же домене |
Подходит для файлов, которые собирает JavaScript (раздел ниже) |
| Пользователь настроил браузер «открывать PDF сразу» | Файл скачается и может сразу открыться в программе | Ничего: это настройка на стороне читателя |
Последняя строка тоже по справочнику MDN: что будет со скачанным файлом, зависит от браузера и настроек пользователя. Браузер может спросить разрешения перед загрузкой, сохранить файл сам или сразу его открыть.
Проверить первое ограничение просто. Откройте страницу с ссылкой, нажмите её и посмотрите, что сделал браузер. Если вместо загрузки открылась вкладка с файлом, сверьте домен в href с доменом страницы.
Кнопка «Скачать» на JavaScript
Бывает, что файла на сервере нет: таблицу или отчёт собирает сам скрипт на странице. Тогда файл создают в памяти через Blob, получают для него адрес blob: и нажимают невидимую ссылку программно.
<button id="save">Скачать CSV</button>
<script>
document.getElementById('save').addEventListener('click', () => {
const csv = 'id;name\n1;Анна\n2;Борис\n';
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'users.csv';
a.click();
setTimeout(() => URL.revokeObjectURL(url), 0);
});
</script>По клику браузер сохраняет users.csv с тремя строками. Последняя строка кода освобождает память. Адрес blob: освобождают вызовом URL.revokeObjectURL(), так описано в справке MDN по createObjectURL.
Как скрипт находит кнопку по id и вешает на неё обработчик, подробно разобрано в статье про DOM-дерево в JavaScript. А если язык для вас пока новый, сначала прочитайте, зачем новичку учить JavaScript.
Как настроить скачивание на сервере
Атрибут живёт в HTML и работает только для своих файлов. Надёжнее сказать браузеру «скачай» с той стороны, где лежит файл. Для этого сервер отдаёт заголовок:
Content-Disposition: attachment; filename="price-2026.pdf"Значение attachment означает «сохранить», inline означает «показать в браузере». Описание обоих значений есть на странице заголовка в MDN.
- Заголовок работает для любой ссылки, даже без
downloadи даже если на файл ссылаются с чужих сайтов. - Имя из
filenameглавнее имени в атрибуте. Ссылка сdownload="mine.pdf"сохранит файл какserver-name.pdf, если сервер прислал такое имя в заголовке. - Где прописать заголовок, зависит от хостинга: в настройках веб-сервера, в панели хостинга или в коде, который отдаёт файл.
Если вы делаете сайт сами и хотите разобраться и в разметке, и в том, как сайт работает целиком, посмотрите план, как стать фронтенд-разработчиком.
Как сделать ссылку на скачивание через облако
Этот способ для тех, у кого нет своего сайта и нужно просто превратить файл в ссылку. Файл загружают в облачное хранилище, включают доступ по ссылке и отправляют адрес в письме или мессенджере.
Яндекс Диск
Порядок из справки Яндекс Диска, если платные настройки ссылки не нужны:
- Откройте Диск и загрузите файл.
- Выберите файл и в верхнем меню нажмите «Поделиться». То же самое есть в меню по правой кнопке мыши.
- Нажмите «Скопировать» и отправьте ссылку.
Без тарифа Яндекс 360 у ссылок есть ограничения. Если файл за сутки скачают слишком много раз, сработает лимит, и до конца дня скачивать его будет нельзя. Пароль, срок действия и запрет скачивания доступны только в платных тарифах. Как устроены место и тарифы Диска, мы разбирали в обзоре Яндекс Диска.
Ссылка вида disk.yandex.ru/d/… ведёт на страницу просмотра с кнопкой «Скачать». Прямой адрес самого файла выдаёт API Диска. GET-запрос на cloud-api.yandex.net/v1/disk/public/resources/download с параметром public_key возвращает сгенерированный адрес в поле href, и уже по нему файл скачивается.
Токен для этого запроса не нужен: по документации, в запросах к чужим опубликованным ресурсам OAuth-токен и заголовок Authorization не указывают. Но это всё равно вызов API, то есть способ для разработчика, а не для разовой отправки файла.
Google Диск
По справке Google Диска порядок такой:
- Выберите файл и нажмите «Открыть доступ».
- В разделе «Общий доступ» нажмите на стрелку и выберите «Все, у кого есть ссылка».
- Нажмите «Копировать ссылку».
При таком режиме человек открывает файл без входа в аккаунт Google. Скачивание у читателей включено по умолчанию, но владелец может его выключить в настройках доступа.
Если вы пересылаете в основном фото и видео, сравните тарифы облаков в подборке сервисов для хранения фото и видео.
Файлообменники без регистрации
Если файл нужен человеку один раз, облако заводить необязательно. Файлообменник даёт ссылку сразу после загрузки и сам удаляет файл через заданный срок.
| Сервис | Что можно настроить | Ограничения |
|---|---|---|
| DropMeFiles | Срок хранения: одно скачивание, 3, 7 или 14 дней | До 50 ГБ за загрузку |
| Wertigo | Срок жизни ссылки, число скачиваний, пароль, описание | Ссылка живёт 1 день, 3 дня, неделю или 30 дней |
Частые ошибки и что с ними делать
Большинство проблем со ссылкой на скачивание сводятся к пути к файлу и к настройкам доступа.
- Ссылка ведёт на страницу 404. Путь в
hrefсчитается от папки текущей страницы. Если страница лежит в/blog/, а файл в/files/, пишите путь от корня:/files/price.pdf. - Вместо скачивания открылась вкладка. Файл лежит на другом домене, и
downloadне применился. Решения в таблице выше. - Скачался файл со странным именем. Сервер прислал своё имя в
Content-Disposition, а оно главнее атрибута. - Получатель видит «запросите доступ» в Google Диске. Доступ остался «Ограниченным». Переключите его на «Все, у кого есть ссылка».
- Яндекс Диск пишет, что скачивание ограничено. Сработал суточный лимит бесплатной ссылки. По справке Яндекса получатель может нажать «Сохранить на Яндекс Диск» и скачать файл уже из своего Диска, не дожидаясь следующих суток.
Чтобы проверить ссылку на своей странице, откройте её локально. Как это сделать на компьютере и телефоне, написано в инструкции как открыть HTML-файл.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналГде научиться HTML и вёрстке
Ссылка на скачивание закрывает одну задачу. Если вы собираете сайт сами или думаете о работе HTML-верстальщика, удобнее разобрать теги, атрибуты и стили по порядку. Начать можно со статьи что такое HTML, а дальше выбрать курс:
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| HTML и CSS с нуля Перейти на сайт курса |  Skillbox | 91 626 ₽ | 7635 ₽/мес. | 11 месяцев | Обзор курса |
| HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса |  HTML Academy | 23 400 ₽ | 3900 ₽/мес. | 2 месяца | Обзор курса |
| Основы вёрстки HTML и CSS Перейти на сайт курса |  Академия Синергия | 32 676 ₽ | 2723 ₽/мес. | 3 месяца | Обзор курса |
| HTML и CSS с нуля |  Skypro | 195 160 ₽ | 7972 ₽/мес. | 12 месяцев | Обзор курса |
| Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса |  Бруноям | 29 900 ₽ | 2491 ₽/мес. | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по HTML
