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

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

Раздвигающееся вертикальное меню Drupal 6

Сентябрь 7, 2013 г.

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

Читать

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

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

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

Читать

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Перебор атрибутов HTML элемента в javascript

Февраль 17, 2016 г.

За использованием библиотеки jQuery как то забываешь о базовых свойствах и методах DOM в javascript. Как получить весь набор аттрибутов HTML элемента? Получим ссылку на элемент HTML документа каким либо образом: [crayon-6a2fbd4b4d87e681723769/] ...

Читать

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

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

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