Ссылка для скачивания
Иногда передо мной стоит задача сделать ссылку, которая должна открывать системный диалог для сохранения файла. Браузеры достаточно умны, чтобы открывать такой диалог при скачивании бинарников вроде архивов или 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
Как Internet Explorer загружает HTML-файлы с помощью диспетчера загрузки
Устаревшее и не поддерживаемое классическое приложение Internet Explorer 11 было окончательно отключено с помощью обновления Microsoft Edge в некоторых версиях Windows 10. Дополнительные сведения см. в статье Часто задаваемые вопросы о прекращении использования классических приложений Internet Explorer 11.
В этой статье содержатся сведения о скачивании документов, содержащих расширение HTML.
Исходная версия продукта: Internet Explorer 9 и более поздних версий Исходный номер базы знаний: 2846926
Аннотация
Если веб-сайт хочет создать диалоговое окно «Открыть или сохранить » для ресурса, он может сделать это, добавив Content-Disposition: attachment заголовок в ответ. Если загружаемый документ содержит одно из следующих расширений, Internet Explorer предоставит в диалоговом окне только варианты Сохранить, Сохранить как и Отмена . Internet Explorer будет скрывать команду, Open если сам Internet Explorer будет обработчиком по умолчанию для расширения.
После завершения загрузки с помощью кнопки Сохранить информационная панель внизу веб-страницы предоставит возможность открыть скачанный документ из папки, в которую он был скачан.
Дополнительная информация
Это поведение по разработке и было представлено в Internet Explorer 9.
Если для данного расширения по умолчанию будет использоваться другое приложение, отличное от Internet Explorer (например, Notepad.exe), будет предложена кнопка Открыть, а затем запустится приложение с документом.
Описание конфигурации обработчика по умолчанию доступно в разделе Изменение программ, используемых Windows 7 по умолчанию.
Обратная связь
Были ли сведения на этой странице полезными?
Как сделать ссылку для скачивания?
Любые известные браузеру типы документов, такие как 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
- Якоря
Ссылка для скачивания HTML
Ссылка для загрузки — это ссылка, которая используется для загрузки файла с сервера в каталог браузера на локальном диске.
Код ссылки для скачивания записывается как:
Код создаст эту ссылку:
Код состоит из следующих частей:
Смотрите также
- HTML ссылка
- Якорная ссылка HTML
- Ссылка на кнопку HTML
- Ссылка на изображение HTML
- Цвет ссылки HTML
- HTML-ссылка mailto
- HTML-ссылка в новом окне
HTML ССЫЛКИ
- Якорная ссылка
- Ссылка кнопки
- Ссылка для скачивания
- Электронная почта
- Ссылка на изображение
- Ссылка на Javascript
- Цвет ссылки
- Ссылка в новом окне
- Текстовая ссылка
БЫСТРЫЕ ТАБЛИЦЫ
Этот веб-сайт использует файлы cookie для улучшения вашего опыта, анализа трафика и отображения рекламы. Учить больше