Ссылка на скачивание
Иногда бывает нужно создать ссылку, которая должна показать системный диалог для сохранения файла.
Браузеры достаточно умны, чтобы открыть этот диалог для некоторых двоичных файлов, например, для архивов или *.exe. Но что, если я хочу загрузить изображение или видео?
Заголовок Content-Disposition
Наиболее правильный способ — добавить заголовок Content-Disposition на сервере:
Content-Disposition: attachment; filename=cat.jpg
Когда браузер встречает такой заголовок, он начинает скачивать файл, а не показывать его.
Но иногда вы не можете изменить конфигурацию сервера, поэтому нам нужен более браузерный способ решения проблемы.
Атрибут download
Самый простой способ сделать это — добавить атрибут download к вашей ссылке.
Если вы добавите его без какого-либо значения, браузер попытается получить имя файла из заголовка Content-Disposition (да, он имеет высокий приоритет) или из пути к нему.
<a href="cat.jpg" download>
<img src="cat-preview.jpg" alt="Cat photo preview">
</a>
You can set some value to download if you want to change the default name. It can help when you have some strange auto-generated URL like https://cdn/images/a1H5-st42-Av1f-rUles.
<a href="images/1h24v9lj.jpg" download="kitten"> Download</a>
Попробуйте: ссылка.
Важно! Вся эта магия атрибутов не предназначена для cross-origin ссылок. Вы не можете контролировать такие ссылки из-за проблем безопасности.
И помните, что IE и старый Safari ничего не знают про атрибут download.
blob: и data:
Есть ещё один лайфхак, который поможет вашим пользователям сохранить фотографии котят в удобном для них формате. Если вы используете на своем сайте изображения в формате AVIF или WebP, велика вероятность, что никто не сможет сохранить их на своём компьютере или телефоне, чтобы просмотреть позже. Точнее, они смогут сохранить изображение, но не смогут его просмотреть. И это печально.
Чтобы помочь им, используйте data: или blob: URL-адреса внутри атрибута href.
Шаг 1. Рисуем изображение при помощи canvas.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0);
};
image.src = 'cat.avif';
Шаг 2a. Сохраняем изображение как blob внутри атрибута 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 на клиенте!
Шаг 2b. Сохраняем изображение как data в атрибуте href ссылки.
Некоторые браузеры не могут использовать blob, поэтому вы можете помочь им с помощью data-urls.
const dataLink = document.getElementById('data-link');
dataLink.href = canvas.toDataURL('image/jpeg', 0.9);
Это еще проще, но не так эффективно.
