Если файл генерируется на фронт-енд, то как инициировать скачивание файла в js? Давайте посмотрим.
Скачивание инициируется после нажатия пользователем на ссылку в браузере. Потому мы создадим элемент ANCHOR и выполним клик по нему.
Так как контент не передаётся с сервера, то он должен быть локальным. В этом нам поможет кодирование ссылки в виде blob объекта, куда мы сохраним наши данные для скачивания.
Пример функции для скачивания текста в виде файла:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 12, 2023 г.
Рассмотрим три операции - установка нужного бита в числе, сброс бита и инверсия.
У нас есть число N и номер бита i. Номер бита нумерует биты, начиная с нуля.
Прежде всего нам понадобится маска, с помощью которой мы произведем нужную нам операцию. ...
Читать
Август 31, 2015 г.
Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов.
Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы ...
Читать
Ноябрь 25, 2016 г.
ngRepeat - рабочая лошадка в шаблонах, используемых при работе с AngularJS. Цикл имеет множество опций, работает с фильтрами и сортировкой, может подключать ...
Читать
Декабрь 11, 2016 г.
Не ослабевает интерес к вопросу о динамическом создании связанных выпадающих HTML списков. Для двух зависимых списков (я публиковал пример более 5 лет назад!) ситуация простая и понятная, но люди задают вопрос - а как развить пример для вложения 3х списков? ...
Читать