JavaScript. Экспорт текста в файл

Функция на JavaScript для экспорта указанного текста со страницы сайта в текстовый файл. Привязка функции к кнопке на html-странице.

Содержание

Функция для экспорта текста в файл

Функция на JavaScript для создания текстового файла из текста на странице:

function downloadTextFromElement(elementId, filename) {

// Находим элемент на странице по ID

const element = document.getElementById(elementId);

// Проверяем, что элемент найден и содержит текст

if (element && element.textContent) {

const text = element.textContent;

// Создаем Blob с текстом

const blob = new Blob([text], { type: 'text/plain' });

// Создаем URL для Blob

const url = URL.createObjectURL(blob);

// Создаем временную ссылку для скачивания файла

const a = document.createElement('a');

a.href = url;

a.download = filename // || 'download.txt'; // здесь можно задать имя файла по умолчанию,

// тогда можно будет его не задавать при обращении к функции

// Кликаем по ссылке для начала скачивания

a.click();

// Освобождаем URL после использования

URL.revokeObjectURL(url);

} else {

console.error('Элемент не найден или пуст.');

}

// Пример использования функции downloadTextFromElement с привязкой к кнопке на html-странице

// Предположим, на странице есть элемент <div id="textSource">Экспортируемый текст здесь</div>

document.addEventListener('DOMContentLoaded', () => {

const button = document.getElementById('downloadButton');

button.addEventListener('click', () => {

downloadTextFromElement('textSource', 'download.txt'); // download.txt - имя файла по умолчанию, заданное при обращении к функции

});

Параметры функции:

elementId — ID блока, текст из которого будет экспортирован в текстовый файл (в примере: textSource);
filename — имя файла по умолчанию, который будет создан для вставки указанного текста (в примере: download.txt).

Этот скрипт предполагает наличие элемента с ID textSource и кнопки с ID downloadButton на html-странице. Когда пользователь нажимает кнопку, текст из элемента сохраняется в текстовый файл download.txt, который автоматически загружается на устройство.

HTML-страница для тестирования

Пример HTML-страницы для тестирования функции на JavaScript для экспорта текста в файл:

<!DOCTYPE html>

<head>

<title>Сохранение текста в файл</title>

</head>

<body>

<h1>Сохранение текста в файл</h1>

<div id="textSource">Это текст, который мы сохраним в текстовый файл.</div>

<br>

<button id="downloadButton">Скачать</button>

</body>

</html>

Тестирование экспорта текста в файл

Для тестирования функции на JavaScript для экспорта текста в файл необходимы следующие действия:

Создайте папку Test в каталоге C:.
Создайте в папке Test текстовый файл с именем export-txt-txt.js и вставьте в него код функции вместе с примером использования.
Создайте в папке Test текстовый файл с именем example-export-txt-txt.html и вставьте в него код HTML-страницы для тестирования.

Теперь вы можете открыть файл example-export-txt-txt.html (он откроется в браузере по умолчанию), нажать кнопку Скачать и увидеть результат работы.

Приведенный код для экспорта текста в файл успешно протестирован на страницах сайта WordPress. Главное, подобрать уникальный ID для элемента, из которого экспортируется текст.

Ну и конечно же, для тестирования на WordPress или на других CMS, необходимо убрать из приведенного примера кода лишние html-теги, которые уже присутствуют на странице, сгенерированной CMS.

Еще один вариант экспорта

Это упрощенный код — он подходит для тех случаев, когда функция JavaScript используется всего на нескольких страницах сайта (можно не выносить функцию в отдельный файл):

<!DOCTYPE html>

<head>

<title>Экспорт текса в файл</title>

</head>

<body>

<h1>Экспорт текса в файл</h1>

<p id="text-content">Это текст, который будет сохранён в текстовый файл.</p>

<button id="download-btn">Сохранить текст</button>

document.getElementById('download-btn').addEventListener('click', function() {

// Получаем текст из элемента 'text-content'

const text = document.getElementById('text-content').textContent;

// Создаем Blob с текстовым содержимым

const blob = new Blob([text], { type: 'text/plain' });

// Создаем временную ссылку для скачивания файла

const link = document.createElement('a');

link.href = URL.createObjectURL(blob);

link.download = 'download-text.txt'; // Имя скачиваемого файла по умолчанию

// Запуск скачивания

link.click();

// Очистка URL-объекта

URL.revokeObjectURL(link.href);

});

</script>

</body>

</html>

Чтобы этот код работал на странице сайта WordPress, между тегами <script> </script> не должно быть пропущенных строк.

Смотрите также, как экспортировать текст в PDF-файл и как экспортировать таблицу в PDF-файл.