Задача. Нужно сделать по клику на кнопке скачивание текста в текстовом файле .txt из определенного элемента на странице. Текст может генерироваться в зависимости от условий. Например, как на странице генератора политики конфидециальности.
Решение. На JavaScript можно реализовать скачивание контента в виде текстового файла, как в Примере №1. Нам нужно копировать содержание элемента (текстовое или HTML), записать и сохранить его в текстовый файл при клике на кнопку. Используем Код №1.
Пример:
Этот текст находится в элементе div с идентификатором "example-text", который можно скачать в текстовом файле в двух вариантах:
- Кнопка «Скачать текст» — в скачаном файле my-text.txt будет только текст.
- Кнопка «Скачать HTML» — в скачаном файле my-text-html.txt будет HTML элемента с текстом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!-- Копирование элемента id="example-text" и сохранение в файл --> <div id="example-text"> <p>Этот текст находится в элементе <code>div</code> с идентификатором <code>"example-text"</code>, который можно скачать в текстовом файле в двух вариантах:</p> <ol> <li>Кнопка «Скачать текст» — в скачаном файле my-text.txt будет только текст.</li> <li>Кнопка «Скачать HTML» — в скачаном файле my-text-html.txt будет HTML элемента с текстом.</li> </ol> </div> <button type="button" id="btn-dwnld-txt">Скачать Текст</button> <button type="button" id="btn-dwnld-txthtml">Скачать HTML</button> <script> /* Получаем кнопки "Скачать" */ let btnDownloadText = document.querySelector("#btn-dwnld-txt"); let btnDownloadHTML = document.querySelector("#btn-dwnld-txthtml"); /* Вешаем на событие клика кнопок "Скачать" соответстующие функции */ btnDownloadText.addEventListener("click", downloadText); btnDownloadHTML.addEventListener("click", downloadHTML); /* Сохранить строку без html-тегов и скачать в файле */ function downloadText() { let copytext = document.querySelector('#example-text').textContent; // id элемента с контентом #example-text let el = document.createElement('a'); el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(copytext)); el.setAttribute('download', 'my-text.txt'); el.style.display = 'none'; document.body.appendChild(el); el.click(); document.body.removeChild(el); } /* Сохранить строку с html-тегами и скачать в файле */ function downloadHTML() { let copytext = document.querySelector('#example-text').innerHTML; // Копируем в строку HTML элемента let el = document.createElement('a'); el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(copytext)); el.setAttribute('download', 'my-text-html.txt'); el.style.display = 'none'; document.body.appendChild(el); el.click(); document.body.removeChild(el); } </script> |