Как сделать ссылку на скачивание файла 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

MnogoBlog

Как создать сайт на wordpress, настроить и оптимизировать wordpress

Html ссылка с автоматическим скачивание

MnogoBlog > WordPress > Расширения wordpress > Хаки > Html ссылка с автоматическим скачивание

Здравствуйте, если Вы хотите сделать ссылку, чтобы кликая по ней файл автоматически скачивался, а не открывался достаточно применить к ссылке параметр download.
Скачать исходники для статьи можно ниже

Пример ссылки с автоматическим скачивание файла:

Например вот две ссылки, по одной картинка откроется, по другой скачается автоматически:
Смотреть картинку
Скачать картинку

Есть небольшой нюанс, если у вас на сайте стоит плагин лайтбокса, например Simple Lightbox, то нужно исключить часть теста или ссылку, чтобы плагин лайтбокса в данной ссылке не работал. Например, для плагина Simple Lightbox достаточно воспользоваться шорткодами “slb_exclude” и закрывающим “/slb_exclude”:

Сведения о плагине Simple Lightbox (на момент публикации статьи):
Сайт плагина: “ru.wordpress.org/plugins/simple-lightbox/”
Автор: Archetyped
Активных установок: 200000+

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

Любые известные браузеру типы документов, такие как 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?

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

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

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

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

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

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

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

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

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

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