Если файл генерируется на фронт-енд, то как инициировать скачивание файла в 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 17, 2011 г.
Хорошо если ваш сайт работает во всех, или почти во всех браузерах так, как вы того хотите. Все меняется, выходят новые версии, появляются новые возможности, и глупо их не использовать, в угоду "старичкам". Года 1,5 назад IE 6.0 (судя по статистике посещений ...
Читать
Март 21, 2025 г.
Один из режимов навигации в Swiper - называется freemode. Он позволяет листать слайды (тащить мышкой или свайпить) без фиксации на границах слайда. Но если вы используете навигацию, то перелистывание будет производиться дискретно по слайдам.
В ...
Читать
Апрель 7, 2025 г.
Плагин DataFilter позволяет управлять фильтрацией HTML тегов. Он является "родным" для CKE плагином, так что ничего дополнительно устанавливать не нужно. Рассмотрим как им можно управлять на уровне кастомного плагина.
Допустим, вы хотите разрешить ...
Читать
Сентябрь 15, 2023 г.
Если вы разрабатываете SPA на Reactjs, используя npx create-react-app my-app команду для создания проекта, то в коробке вы получаете множество полезных ...
Читать