Список файлов: название, формат и размер до скачивания
Перед скачиванием полезно понимать, что находится по ссылке и насколько велик файл. Такие сведения уменьшают неопределённость, особенно на мобильном соединении.
Назначение
Перед скачиванием полезно понимать, что находится по ссылке и насколько велик файл. Такие сведения уменьшают неопределённость, особенно на мобильном соединении.
Как это работает
Название ссылки описывает документ, а формат и размер указываются обычным текстом рядом. Атрибут download может предлагать скачивание, но поведение зависит от адреса ресурса и заголовков сервера.
Пример
<ul><li><a href="/downloads/learning-plan.pdf" download>Учебный план</a> — PDF, 120 КБ.</li><li><a href="/downloads/page-example.zip" download>Файлы примера страницы</a> — ZIP, 35 КБ.</li></ul>
<p>Адреса и размеры в этом примере условные; файлы нужно подготовить отдельно.</p>Что должно получиться
Разметка показывает ожидаемую структуру списка. Она сама не создаёт PDF и архив. В песочнице внешние переходы ограничены, поэтому скачивание проверяется на собственной странице с реальными файлами.
Граница применения и частая ошибка
Не указывайте выдуманный размер в рабочем каталоге и не называйте HTML-страницу прямой ссылкой на PDF. Проверьте Content-Type и Content-Disposition. В архив не должны попадать пароли, служебные конфигурации и лишние резервные копии.
Самостоятельная проверка
Подготовьте два несекретных учебных файла, замените адреса и размеры фактическими. Скачайте их отдельно, проверьте имена и содержимое. Затем убедитесь, что отсутствующий файл возвращает понятную ошибку, а не пустой ответ 200.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.