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

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

Анимация смены картинок с помощью jquery

Декабрь 26, 2012 г.

Ещё одна типовая задача, для которой найдено приличное решение. Типично суть задачи состоит в следующем. Есть набор изображений, которые демонстрируются поочередно в некотором контейнере. Ставится задача по анимации периодической смены этих картинок средствами ...

Читать

Кастомизация infoWindow на картах гугл

Январь 25, 2018 г.

Поп-ап на картах гугл, объект google.maps.InfoWindow, привлекателен возможностью вставки в него собственного HTML контента. Но кастомизация внешнего вида ...

Читать

Пара способов добраться до индекса родительского цикла ng_repeat в Angular

Ноябрь 18, 2016 г.

Если вы начали применять вложенные циклы ng_repeat, но не сильно вникали как это работает, то могли столкнуться с проблемой видимости итератора внешнего цикла во внутреннем. В контексте цикла Angular создает несколько переменных, одна из них - ...

Читать

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

Ноябрь 14, 2016 г.

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

Читать

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

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

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