Создание PDF-файла из данных HTML-страницы с помощью html2pdf.js

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

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

• Данные в формате HTML
• Библиотека html2pdf.js
• Небольшой JavaScript-код

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

HTML-страница может содержать любой контент, который нужно сохранить в PDF-формате. Например:

<div id="invoice">
<!-- Ваши данные для сохранения в PDF -->
</div>

<script src="html2pdf.bundle.js"></script>

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

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

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

<script>
function generatePDF() {
const element = document.getElementById('invoice');
const options = {
margin: 1,
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf()
.from(element)
.set(options)
.save();
}
</script>

<style>
#invoice {
font-family: Arial, sans-serif;
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
}
</style>

<script>
window.onload = function() {
generatePDF();
};
</script>