Безлимитный хостинг на сверхбыстрых SSD-дисках от 73р в месяц   •   Реклама
5 317 просм
4 комм
Поделиться:

Как создать ссылку на скачивание файла в HTML?

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

Предположим, что ваш сайт посвящен обоям для рабочего стола компьютера. Понятное дело, что на странице изображение размером 1900x1900 пикселей вы не будете размещать в полном объеме, а разместите уменьшенную его копию с возможностью скачать полную версию изображения.

Как это делаю большинство сайтов?

<a href="https://www.pandoge.com/images/wallpapers.jpg">Скачать</a>

Неплохо, но при нажатии на такую ссылку мы получаем:

1. Покинутую страницу сайта;

2. Дополнительное действие для пользователя, ведь ему просто открывается страница с изображением, где он должен совершить действия для сохранения изображения.

Как быть в таком случаем и исправить положение?

Все довольно просто. Вам необходимо добавить атрибут «download» к ссылкам, чтобы получилось:

<a href="https://www.pandoge.com/images/wallpapers.jpg" download>Скачать</a>

В таком случае при нажатии на ссылку пользователю сразу будет предложено сохранить документ.

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

4
комментария
Форма комментирования этой статьи скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 1
    26
      •  Проверенный
    18 июн в 01:09

    Благодарю, интересен этот вопрос

    • 2
    841
      •  Администратор
    18 июн в 01:08

    Артём Ройзман, подумаю на досуге над этим вопросом. smiley

    • 1
    26
      •  Проверенный
    18 июн в 00:06

    А если файл на внешнем ресурсе, как таким образом заставить его скачиваться а не открываться? nerd

    • 1
    766
      •  Гости
    22 апр в 15:17

    Спасибо! Полезный и нужный урок, жаль что даже про сайты компаний используют открытие в новой вкладке а иногда даже замена той же вкладки )

Подняться наверх
«Pandoge» - помощник вебмастера