Ссылка для скачивания
Иногда передо мной стоит задача сделать ссылку, которая должна открывать системный диалог для сохранения файла. Браузеры достаточно умны, чтобы открывать такой диалог при скачивании бинарников вроде архивов или 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
Ссылка на файл
В вызове после предыдущей части мы размечали рецепт печенья для Кекса. Он оказался настолько хорошим, что мы решили сделать его доступным для всех. Мы сохранили рецепт в формате PDF, чтобы любой желающий мог его скачать и распечатать. Осталось добавить ссылку на этот самый файл.
Когда мы переходим по ссылкам, то попадаем на другие страницы или места на странице. Но при переходе по ссылке на файл браузер предложит его скачать.
Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. Но в последнее время браузеры научились открывать PDF-файлы и многие другие.
Для того чтобы предотвратить открытие файлов прямо в браузере, у тега существует атрибут download , который поможет именно скачать файл.
При скачивании или загрузке файлов со сторонних сайтов для безопасности можно использовать атрибут rel=»noopener» . Этот атрибут позволяет игнорировать скрипты сторонней страницы, которые могут влиять на загрузку файла. Особенно актуален этот атрибут в случае, если загрузка происходит в новой вкладке или новом окне.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Блог
День двенадцатый. Все любят печенье
Сегодня Кекс попросил меня сделать рецепт того самого рыбного печенья доступным для всех своих клиентов. Но вот незадача, у меня нет принтера, да и печатать рецепт на всех, тратить бумагу, не хочется. Пришлось сделать ссылку для скачивания файла.
Скачать
Как создать ссылку на скачивание файла в HTML?
На самом деле корректному скачиванию файлов не уделяют должного внимания. Казалось бы, простое сохранение документа – локально, на компьютере пользователя. Но неправильная настройка скачивания добавляет лишние и никому не нужные шаги. В такие моменты нужно позаботиться о юзабилити сайта.
Предположим, что ваш сайт посвящен обоям для рабочего стола компьютера. Понятное дело, что на странице изображение размером 1900×1900 пикселей вы не будете размещать в полном объеме, а разместите уменьшенную его копию с возможностью скачать полную версию изображения.
Как это делаю большинство сайтов?
Неплохо, но при нажатии на такую ссылку мы получаем:
1. Покинутую страницу сайта;
2. Дополнительное действие для пользователя, ведь ему просто открывается страница с изображением, где он должен совершить действия для сохранения изображения.
Как быть в таком случаем и исправить положение?
Все довольно просто. Вам необходимо добавить атрибут «download» к ссылкам, чтобы получилось:
В таком случае при нажатии на ссылку пользователю сразу будет предложено сохранить документ.
Обратите внимание, что файл должен находиться на вашем сайте, иначе он просто откроется в браузере без предложения сохранить его на компьютере.
Как добавить ссылку на скачивание файла
В системе управления UralCMS вы можете вставлять ссылки на документы с возможностью скачать их.
Видео: добавление ссылки для скачивания файла
Для того, чтобы добавить ссылку на скачивание файла:
1. В системе управления сайтом найдите раздел в котором Вы хотите вставить ссылку на документ для скачивания и перейдите к его редактированию.
2. На открывшейся странице в поле текстового контента найдите и выделите текст или картинку, которые будут являтся ссылкой на скачивание, с помощью мыши.
3. Нажмите по выделеному тексту или изображению правой кнопкой мыши и выберите в открышемся меню пункт «Ссылка».
4. В открывшемся окне, в строке «Адрес ссылки» нажмите на кнопку «Обзор» для перехода в менеджер файлов.
5. В менеджере файлов вы сможете создать папки и загрузить файлы для скачивания. Перед загрузкой файла переименуйте его в латинские символы или цифры (A-Z, a-z, 0-9). Для того, чтобы добавить файл, кликните по кнопке «Загрузить» и выберите файл для добавления со своего компьютера. После загрузки файл появится в общем списке файлов, добавленных ранее на сервер (хостинг).
6. После успешной загрузки вернитесь к списку файлов, найдите необходимый документ для вставки и нажмите по нему левой кнопкой мыши .
7. В ы перейдете к окну вставки ссылки, где автоматически будет подставлено значение в поле «Адрес ссылки».
Внимание! Если Вы хотите вставить ссылку на документ .pdf, для параметра «Открывать ссылку» установите значение «В новом окне».
8. Для окончания вставки ссылки на документ нажмите на кнопку «Ок».
9. Сохраните изменения, внесенные в раздел.