Если файл генерируется на фронт-енд, то как инициировать скачивание файла в 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Октябрь 7, 2018 г.
Как прочитать GET параметры на стороне клиента из кода на javascript? Бывают ситуации, когда нужно что то сделать из JS в зависимости от переданных параметров ...
Читать
Май 3, 2017 г.
Веб-программирование - почти всегда это создание кода, с использованием нескольких языков программирования. Зная одни языки, вы ищите знакомые аналоги там, где не так твердо стоите на ногах.
Есть ли в javascript оператор цикла foreach (аналог в PHP)? ...
Читать
Сентябрь 17, 2019 г.
Полезное ноу-хау для тех кто пользуется jQuery. Функция $.each() производит перебор элементов по порядку, но иногда требуется выполнить операции в обратном порядке.
jQuery ничего не предлагает для реализации нашей задачи, но это и не требуется, ...
Читать
Февраль 25, 2017 г.
Такая задача возникает не часто, но если вы заботитесь о пользователе, и помогаете ему скопировать в буфер обмена нужную информацию - то пользователь будет вам признателен. Так вы заработаете ещё один плюсик в копилку "юзабилити".
Разберем ключевые ...
Читать