Создание PDF-файла из HTML-контента с использованием html2pdf.js

В этой статье мы рассмотрим, как создать PDF-файл из HTML-данных на странице с помощью клиентской библиотеки html2pdf.js. Этот метод полезен для генерации документов, таких как электронные билеты, счета, инвойсы и другие, которые можно сохранить и распечатать.

Что нам понадобится?

Для создания PDF-файла потребуется:

1. HTML-контент, который нужно сохранить в PDF.
2. Библиотека html2pdf.js.
3. Небольшой JavaScript-код для интеграции.

Шаги по созданию PDF

1. Подготовка HTML-контента

Сначала разместите на странице HTML-контент, который вы хотите преобразовать в PDF. Это может быть текст, изображения, таблицы и даже QR-коды.

2. Подключение библиотеки html2pdf.js

Подключите библиотеку html2pdf.js к вашему проекту. Вы можете загрузить библиотеку и разместить её на своем сервере или использовать CDN-сервис, например, cdnjs:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>

<div id="invoice">
<!-- Ваш контент, сохраняемый в PDF -->
</div>

<button onclick="generatePDF()">Сохранить в PDF</button>

function generatePDF() {
const element = document.getElementById('invoice');
html2pdf()
.from(element)
.save();
}

html2pdf()
.set({
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
})
.from(element)
.save();