Если файл генерируется на фронт-енд, то как инициировать скачивание файла в 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 3, 2017 г.
Веб-программирование - почти всегда это создание кода, с использованием нескольких языков программирования. Зная одни языки, вы ищите знакомые аналоги там, где не так твердо стоите на ногах.
Есть ли в javascript оператор цикла foreach (аналог в PHP)? ...
Читать
Январь 24, 2021 г.
Некоторые ошибки происходят на стороне пользователя и не попадают в логи на сервере. В этом могут быть виноваты настройки сети, плагины браузера, которые установил пользователь, политики безопасности или антивирус, которые блокируют загрузку некоторых ...
Читать
Октябрь 31, 2018 г.
Широкое применение мобильных устройств для доступа в интернет накладывает свои специфические требования на разработку веб-сайтов. Привычный обработчик onclick может срабатывать совместно с ontouchstart, а может не срабатывать вовсе на мобильном устройстве. ...
Читать
Декабрь 11, 2016 г.
Не ослабевает интерес к вопросу о динамическом создании связанных выпадающих HTML списков. Для двух зависимых списков (я публиковал пример более 5 лет назад!) ситуация простая и понятная, но люди задают вопрос - а как развить пример для вложения 3х списков? ...
Читать