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

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

Манипуляции с битами в JS

Май 12, 2023 г.

Рассмотрим три операции - установка нужного бита в числе, сброс бита и инверсия. У нас есть число N и номер бита i. Номер бита нумерует биты, начиная с нуля. Прежде всего нам понадобится маска, с помощью которой мы произведем нужную нам операцию. ...

Читать

Управление размерами autocomplete ui widget в Drupal

Октябрь 25, 2023 г.

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

Читать

Копируем в буфер обмена средствами javascript

Февраль 25, 2017 г.

Такая задача возникает не часто, но если вы заботитесь о пользователе, и помогаете ему скопировать в буфер обмена нужную информацию - то пользователь будет вам признателен. Так вы заработаете ещё один плюсик в копилку "юзабилити". Разберем ключевые ...

Читать

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

Апрель 9, 2024 г.

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

Читать

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

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

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