JavaScript. Экспорт таблицы в PDF

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

Содержание

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

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

function generatePDF() {

const table = document.getElementById("myTable");

const rows = table.querySelectorAll("tr");

// Извлечение данных из таблицы

const body = [];

rows.forEach((row, rowIndex) => {

const cells = row.querySelectorAll(rowIndex === 0 ? "th" : "td");

const rowData = Array.from(cells).map(cell => cell.innerText);

body.push(rowData);

});

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

const docDefinition = {

content: [

{ text: 'Экспорт таблицы', style: 'header' },

{

table: {

headerRows: 1, // Mark the first row as a header

body: body

layout: 'lightHorizontalLines' // Optional table layout

}

styles: {

header: {

fontSize: 18,

bold: true,

margin: [0, 0, 0, 10]

tableHeader: { // Style for table headers

bold: true,

fontSize: 12,

color: 'black'

}

defaultStyle: {

fontSize: 10

}

};

// Применение стиля к первой строке таблицы

docDefinition.content[1].table.body[0] = docDefinition.content[1].table.body[0].map(text => ({

text: text,

style: 'tableHeader'

}));

// Генерация и загрузка PDF-файла

pdfMake.createPdf(docDefinition).download("table.pdf");

}

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

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

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

<!DOCTYPE html>

<head>

<title>Экспорт HTML-таблицы в PD</title>

</head>

<body>

<h1>Экспорт HTML-таблицы в PDF</h1>

<thead>

<tr>

<th>Категория</th>

<th>Группа</th>

<th>Товар</th>

</tr>

</thead>

<tbody>

<tr>

<td>Смартфоны и планшеты</td>

<td>Смартфоны</td>

<td>Смартфон Xiaomi Redmi Note 13</td>

</tr>

<tr>

<td>Техника для кухни</td>

<td>Стиральные машины</td>

<td>Стиральная машина LG F2J3NS2W</td>

</tr>

<tr>

<td>Инструменты для ремонта</td>

<td>Шуруповерты</td>

<td>Дрель-шуруповерт METABO BS 18</td>

</tr>

</tbody>

</table>

<br>

<button onclick="generatePDF()">Скачать PDF</button>

</body>

</html>

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

Тестирование экспорта таблицы

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

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

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

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

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

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

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

<!DOCTYPE html>

<head>

<title>Экспорт HTML-таблицы в PDF</title>

</head>

<body>

<h1>Экспорт HTML-таблицы в PDF</h1>

<thead>

<tr>

<th>Категория</th>

<th>Группа</th>

<th>Товар</th>

</tr>

</thead>

<tbody>

<tr>

<td>Смартфоны и планшеты</td>

<td>Смартфоны</td>

<td>Смартфон Xiaomi Redmi Note 13</td>

</tr>

<tr>

<td>Техника для кухни</td>

<td>Стиральные машины</td>

<td>Стиральная машина LG F2J3NS2W</td>

</tr>

<tr>

<td>Инструменты для ремонта</td>

<td>Шуруповерты</td>

<td>Дрель-шуруповерт METABO BS 18</td>

</tr>

</tbody>

</table>

<br>

<button id="downloadPdfButton">Download PDF</button>

// Привязка функции generatePDF к событию click кнопки downloadPdfButton

document.getElementById("downloadPdfButton").addEventListener("click", generatePDF);

function generatePDF() {

const table = document.getElementById("myTable");

const rows = table.querySelectorAll("tr");

// Извлечение данных из таблицы

const body = [];

rows.forEach((row, rowIndex) => {

const cells = row.querySelectorAll(rowIndex === 0 ? "th" : "td");

const rowData = Array.from(cells).map(cell => ({

text: cell.innerText,

style: rowIndex === 0 ? "tableHeader" : "tableBody"

}));

body.push(rowData);

});

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

const docDefinition = {

content: [

{ text: 'Table Export', style: 'header' },

{

table: {

headerRows: 1, // Specify the first row as a header

body: body

layout: 'lightHorizontalLines' // Optional: adds gridlines for the table

}

styles: {

header: {

fontSize: 18,

bold: true,

margin: [0, 0, 0, 10]

tableHeader: { // Style for the table header row

bold: true,

fontSize: 12,

color: 'black'

tableBody: { // Style for the table body rows

fontSize: 10,

color: 'black'

}

};

// Генерация и загрузка PDF-файла с именем table.pdf

pdfMake.createPdf(docDefinition).download("table.pdf");

}

</script>

</body>

</html>

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

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