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

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

Любые известные браузеру типы документов, такие как HTML, изображение, PDF-файл и др., по ссылке открываются непосредственно в браузере. Чтобы браузер вместо открытия скачивал файл, к элементу следует добавить атрибут download, как показано в примере 1.

Пример 1. Ссылка для скачивания

Эти две ссылки по своему виду никак не отличаются друг от друга, поэтому с помощью стилей можно выделить ссылки для скачивания, добавив к ним картинку. Для этого используем селектор a[download] и тем самым выбираем элементы , у которых присутствует атрибут download . Затем добавляем к селектору псевдоэлемент ::after со свойством content, значением которого выступает адрес изображения (пример 2). Остальные свойства нужны для сдвига картинки относительно текста ссылки.

Пример 2. Картинка у ссылок для скачивания

Результат данного примера показан на рис. 1.

Рис. 1. Ссылка для скачивания

См. также

• content
• quotes
• relative и absolute
• text-decoration-skip-ink
• Аккордеон меню
• Анимация ссылок при наведении
• Атрибуты ссылок
• Добавление тени
• Использование :hover
• Наследование в CSS
• Не только текст
• Очистка float
• Подробнее о позиционировании
• Псевдоэлемент ::after
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Создание ссылок
• Ссылки
• Ссылки
• Ссылки в HTML
• Якоря

Ссыл­ка для ска­чи­ва­ния

Иногда передо мной стоит задача сделать ссылку, которая должна открывать системный диалог для сохранения файла. Браузеры достаточно умны, чтобы открывать такой диалог при скачивании бинарников вроде архивов или EXE-файлов. Но что делать, если я хочу скачивать картинки или какие-нибудь видео? Именно скачивать, не открывать для просмотра.

Заголовок Content-Disposition Скопировать ссылку

Самый правильный способ попросить браузер скачать файл — добавить на стороне сервера заголовок Content-Disposition к потоку с файлом.

Content-Disposition: attachment; filename=kitten.jpg 

Когда браузер видит у заголовка значение attachment , то пытается скачать файл.

Но иногда у вас просто нет возможности настроить сервер под свои нужды и добавить ещё один mod_rewrite . Нужен какой-то более браузерный способ решить задачу.

Атрибут download Скопировать ссылку

Самый простой способ — добавить атрибут download к ссылке.

Если вы добавите его просто так, без значения, браузер постарается получить имя файла либо из заголовка Content-Disposition (опять он, и у него довольно высокий приоритет), либо из пути файла.

Но вы можете задать значение атрибуту download , и тогда это значение станет именем скачиваемого файла. Это может быть полезно, если у ваших файлов какие-нибудь странные автогенерируемые урлы вроде https://cdn/images/a1H5-st42-Av1f-rUles .

Важно! Вся эта магия атрибутов не для ссылок с других доменов (cross-origin). Вы не можете управлять чужими ресурсами из соображений безопасности.

И помните, что IE и старые Safari не понимают атрибут download . Проверьте в Can I use….

blob: и data: Скопировать ссылку

Полезный лайфхак, чтобы помочь вашим пользователям сохранять картинки котиков в удобном для них формате. Если вы на своём сайте используете картинки в форматах AVIF или WebP, есть очень высокая вероятность, что ни один пользователь не сможет сохранить их к себе на компьютер или смартфон, чтобы потом пересмотреть. Точнее, сохранить-то смогут, а вот посмотреть вне браузера не смогут. Печаль.

Чтобы помочь пользователям, используйте data: или blob: внутри атрибута href .

Шаг 1. Нарисуйте картинку на Canvas Скопировать ссылку

const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const image = new Image(); image.onload = function () < context.drawImage(image, 0, 0); // TODO: всю магию намазывать сюда >; image.src = 'kitten-170.avif'; 

Шаг 2а. Сохранить картинку как блоб в атрибут href ссылки Скопировать ссылку

const blobLink = document.getElementById('blob-link'); canvas.toBlob(blob => < const blobUrl = URL.createObjectURL(blob); blobLink.href = blobUrl; >, 'image/jpeg', 0.9); 

Да-да, я могу сохранить AVIF как JPEG. Классно, правда? Пользователь скачал всего 4 КБ AVIF с сервера, а получил 13 КБ JPEG на клиенте!

Шаг 2б. Сохранить картинку как data в атрибут href ссылки. Скопировать ссылку

Некоторые браузеры не умеют работать с блобами, поэтому вы можете помочь им при помощи data-урлов.

const dataLink = document.getElementById('data-link'); dataLink.href = canvas.toDataURL('image/jpeg', 0.9); 

Так даже проще, но такой подход хуже по производительности.

Можете поиграть с полным демо тут:

Источники Скопировать ссылку

• Wiki: Content-Disposition
• MDN: The Anchor element
• MDN: canvas.toDataURL
• MDN: canvas.toBlob

Атрибут download

При наличии атрибута download браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки.

Синтаксис

Обязательный атрибут

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

HTML5 IE Cr Op Sa Fx

      
Открыть файл в браузере 
Скачать файл  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Ссылка на файл

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

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

Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. Но в последнее время браузеры научились открывать PDF-файлы и многие другие.

Для того чтобы предотвратить открытие файлов прямо в браузере, у тега существует атрибут download , который поможет именно скачать файл.

При скачивании или загрузке файлов со сторонних сайтов для безопасности можно использовать атрибут rel=»noopener» . Этот атрибут позволяет игнорировать скрипты сторонней страницы, которые могут влиять на загрузку файла. Особенно актуален этот атрибут в случае, если загрузка происходит в новой вкладке или новом окне.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

Блог

День двенадцатый. Все любят печенье

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

Скачать