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

Короткий ответ

Добавьте ссылке атрибут download — браузер сохранит файл, а не откроет его:

<a href="/media/menu.pdf" download>Download the menu</a>

Своё имя файла

Значение атрибута становится именем сохранённого файла. Расширение лучше указать то же, что у исходного файла:

<a href="/media/photo-400x250.jpg" download="flower.jpg">Download the photo</a>

Подсказать тип и размер

Пользователю полезно знать, что он скачает и сколько это весит, — особенно на мобильном интернете. Ссылку можно оформить кнопкой:

<style>
  .file { display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 14px; border: 1px solid silver; border-radius: 8px; color: inherit; text-decoration: none; }
  .file small { color: gray; }
</style>
 
<a class="file" href="/media/menu.pdf" download>⬇ Menu <small>PDF, 1 KB</small></a>

Частая ошибка

Ставят download на ссылку на другой сайт и удивляются, что файл просто открывается. Атрибут работает только для файлов с того же домена, что и страница (а также для адресов blob: и data:). Для чужих файлов браузер его игнорирует — скачивание тогда должен включить сам сервер заголовком Content-Disposition: attachment.