JavaScript. Экспорт текста в PDF

Функция на JavaScript для экспорта указанного текста со страницы сайта в PDF-файл с помощью библиотеки Pdfmake. Сохраняет текст на кириллице.

Содержание

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

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

function generatePDF() {

// Получение текста из элемента HTML

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

const textContent = contentElement.innerText || contentElement.textContent;

// Определение содержимого PDF-документа

const docDefinition = {

content: [

{ text: 'PDF-документ', style: 'header' },

{ text: textContent, style: 'body' }

styles: {

header: {

fontSize: 18,

bold: true,

margin: [0, 0, 0, 10]

body: {

fontSize: 12,

lineHeight: 1.5

}

};

// Генерация и скачивание PDF

pdfMake.createPdf(docDefinition).download('document.pdf');

}

// Добавление обработчика события для кнопки

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

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

button.addEventListener('click', generatePDF);

});

Этот скрипт предполагает наличие элемента с ID text-content и кнопки с ID generatePdfButton на html-странице. Когда пользователь нажимает кнопку, текст из элемента сохраняется в PDF-файл с именем по умолчанию document.pdf, который автоматически загружается на устройство.

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

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

<!DOCTYPE html>

<head>

<title>Генератор PDF</title>

</head>

<body>

<h1>Генератор PDF</h1>

<p>Это пример текста, который будет преобразован в PDF-документ.</p>

<p>Вы можете добавить сюда ещё больше текста.</p>

</div>

<button id="generatePdfButton">Создать PDF</button>

</body>

</html>

Использование библиотеки Pdfmake позволяет экспортировать в PDF-файл текст на кириллице.

Тестирование экспорта текста в PDF

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

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

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

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

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

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

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

<!DOCTYPE html>

<head>

<title>Создание PDF-документа</title>

</head>

<body>

<h1>Создание PDF-документа</h1>

<p id="text-content">Это пример текста, который будет преобразован в PDF-документ с помощью библиотеки Pdfmake.</p>

<button id="generate-pdf">Скачать PDF</button>

// Функция для генерации PDF

document.getElementById('generate-pdf').addEventListener('click', function () {

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

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

// Создаем контент для PDF

const docDefinition = {

content: [

{ text: 'PDF-документ', style: 'header' },

textContent

styles: {

header: {

fontSize: 18,

bold: true,

margin: [0, 0, 0, 10]

}

};

// Генерация и скачивание PDF

pdfMake.createPdf(docDefinition).download('download.pdf');

});

</script>

</body>

</html>

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

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