JavaScript: Копирование и сохранение текста в файл .txt

Задача. Нужно сделать по клику на кнопке скачивание текста в текстовом файле .txt из определенного элемента на странице. Текст может генерироваться в зависимости от условий. Например, как на странице генератора политики конфидециальности.

Решение. На JavaScript можно реализовать скачивание контента в виде текстового файла, как в Примере №1. Нам нужно копировать содержание элемента (текстовое или HTML), записать и сохранить его в текстовый файл при клике на кнопку. Используем Код №1.

Пример:

Этот текст находится в элементе div с идентификатором "example-text", который можно скачать в текстовом файле в двух вариантах:

Кнопка «Скачать текст» — в скачаном файле my-text.txt будет только текст.
Кнопка «Скачать HTML» — в скачаном файле my-text-html.txt будет HTML элемента с текстом.

Пример №1: Скачивание текста из элемента на странице по клику на кнопку


<!-- Копирование элемента 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>

<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>

/* Получаем кнопки "Скачать" */

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>

Код №1: Сохранить контент из элемента и сохранить в текстовый файл на JavaScript