В этой небольшой статье мы разберем вариант создания pdf-файла из данных HTML-страницы с помощью клиентской библиотеки html2pdf.js.

Для выполнения задчи нам понадобятся:

1. данные в формате HTML
2. библиотека html2pdf.js
3. небольшой js код.

Итак, приступим.

HTML-страница может содержать любой контент, который нужно сохранить в pdf-формате. Обычно это электронные билеты, счета, инвойсы и иные документы, в том числе qr-код.

После размещения необходимых данных на странице нужно подключить библиотеку html2pdf.js.

Саму библиотеку можно скачать и разместить на своем веб-сервере:

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

Также можно воспользоваться одним из многочисленных CDN-сервисов. Например, cdnjs:

https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js

Следующим шагом мы создаем обертку для контента, подлежащего сохранению в формате pdf:

<div id="invoice">
    <!-- данные, сохраняемые в pdf -->
</div>

Конечно, еще нужна кнопка, по нажатию на которую будет генерироваться pdf-файл:

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

Наконец, напишем нужную нам функцию на ванильном JavaScript:

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

На этом все.

Спасибо за внимание.

Перевод статьи Abayomi Ogunnusi “Download Browser Page as PDF using JavaScript”.