Инициировать скачивание файла без обращения к серверу, используя 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. Вы можете перейти в конец страницы и оставить ваш комментарий.

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

Создание контейнера DIV средствами чистого js

Август 5, 2018 г.

Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js. Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток. ...

Читать

Как копировать или клонировать объект в javascript?

Декабрь 10, 2016 г.

В чистом виде js не даёт такой возможности. То как вы будет создавать копии ваших объектов - зависит от вас. [crayon-6a86100d1a5d7050527431/] т.к. А и B ссылаются на один и тот же объект. Классика Если идти классическим путем, то мы должны запрограммировать ...

Читать

Генетический алгоритм - пример применения методики

Декабрь 10, 2016 г.

Чтобы убедить вас, что метод генетических алгоритмов - это очень простая штука, был создан данный пример. Мы найдем с помощью генетического алгоритма, что кратчайший путь между двумя точками - это прямая. Постановка задачи: Заданы две точки на плоскости ...

Читать

Показ навигации и пагинатора swiper js за пределами контейнера

Апрель 11, 2018 г.

swiper js - jQuery плагин для создания адаптивной карусели картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера. SWIPER на GITHUB. Это стандартный шаблон, который ...

Читать

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

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

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