Инициировать скачивание файла без обращения к серверу, используя js

Если файл генерируется на фронт-енд, то как инициировать скачивание файла в js? Давайте посмотрим.

Скачивание инициируется после нажатия пользователем на ссылку в браузере. Потому мы создадим элемент ANCHOR и выполним клик по нему.

Так как контент не передаётся с сервера, то он должен быть локальным. В этом нам поможет кодирование ссылки в виде blob объекта, куда мы сохраним наши данные для скачивания.

Пример функции для скачивания текста в виде файла:

function download(data, filename) {
  const file = new Blob([data], { type: 'text/plain' });
  const a = document.createElement('A');
  const url = URL.createObjectURL(file);

  a.href = url;
  a.download = filename;

  document.body.appendChild(a);
  a.click();

  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 0);
}

function download(data, filename) {

const file = new Blob([data], { type: 'text/plain' });

const a = document.createElement('A');

const url = URL.createObjectURL(file);

a.href = url;

a.download = filename;

document.body.appendChild(a);

a.click();

setTimeout(function() {

document.body.removeChild(a);

window.URL.revokeObjectURL(url);

}, 0);

}

Т.к. после скачивания ссылка нам становится не нужна, то она удаляется из DOM.

Написать комментарий

Данная запись опубликована в 31.07.2023 19:55 и размещена в рубрике javaScript. Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

JavaScript - как удалить элемент массива

Ноябрь 14, 2016 г.

Javasctipt. Есть массив из N элементов. Нужно удалить i-й. Решение: Нам нужен новый массив без i-го элемента. Если это не хеш, то используем функцию объекта Array.splice(). [crayon-6a838660e2113169808882/] Функция позволяет не только удалять, ...

Читать

Прерывание цикла jQuery функции $.each()

Ноябрь 17, 2018 г.

Часто использую функцию jQuery API each(), но иногда требуется досрочно прервать выполнение этого цикла. Итак, как выйти из $.each()? Обработка происходит внутри функции, и на выходе требуется сигнализировать API что делать дальше. Перебор элементов ...

Читать

Перехват ошибок на front-end с помощью js

Январь 24, 2021 г.

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

Читать

Как получить кол-во слайдов в slick слайдере

Апрель 9, 2024 г.

Слайдер классный, а вот документация какая то вялая. Сначала нужно найти DOM элемент, куда подключен slick, а потом получить объект слайдера, в котором можно прочитать множество свойств, в том числе и число слайдов: [crayon-6a838660e25d6474188368/]

Читать

Комментарии к «Инициировать скачивание файла без обращения к серверу, используя js»

Понравилась статья? Есть вопросы? - пишите в комментариях.

Имя (обязательно)	Е-майл (не будет опубликован на сайте, обязательно для заполнения)
Комментарий: