ЭКСПОРТИРОВАНИЕ PDF-ФАЙЛА ИЗ HTML В React.js ПРИЛОЖЕНИИ

PDF FILE EXPORT FROM HTML IN REACT.JS APPLICATION

Maxim Beryanov

student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

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

ABSTRACT

The PDF file format is a fairly common format for transferring data. To create it, specialized applications are used, most often the desktop ones. This article proposes to generate a PDF file from an HTML representation with the possibility of downloading it or further intended use.

Ключевые слова: React, PDF, HTML, генерация.

Keywords: React, PDF, HTML, generation.

Экспортирование PDF-файла [1] из HTML-представления [2] внутри React.js-приложения [3] предполагает использование соответствующей библиотеки для подобного преобразования с целью создать сущность файла, которая затем может быть скачана пользователем.

Для осуществления такой цели доступно несколько библиотек, но в этой статье мы будем использовать библиотеку react-pdf-export [4]. Для начала нам необходимо установить данную библиотеку, выполнив в терминале следующую команду: npm install @garage-panda/react-pdf-export. После установки библиотеки мы можем импортировать её в свой компонент React.js и использовать для создания PDF-файла из передаваемого текстового содержания в формате HTML. Пример того, как это может выглядеть (рисунок 1):

Рисунок 1. Код отрисовки PDF-компонента из HTML-представления

Здесь мы используем библиотечный хук useGeneratePdf – он предоставляет различные функции для работы с PDF, в данном случае метод для генерации PDF (generatePDF,) и ссылку на контейнер iframe, в котором будет представлена превью будущего PDF-документа. Для реализации цели данной статьи существует компонент под названием <PdfExport/>, который принимает в качестве children дерево HTML-узлов, требуемых для трансформации в PDF. На рисунке 2 представлена сгенерированная страница PDF документа, который можно сохранить из диалогового окна браузера Chrome.

Рисунок 2. Сгенерированный PDF-документ

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

Список литературы:

1. Основы PDF [Электронный ресурс] URL: https://adobe.com/acrobat/about-adobe-pdf.html (дата обращения: 12.12.2022).
2. Введение в HTML [Электронный ресурс] URL: https://geeksforgeeks.org/html-introduction/ (дата обращения: 12.12.2022).
3. React.js [Электронный ресурс] URL: https://reactjs.org (дата обращения: 12.12.2022).
4. React-pdf-export [Электронный ресурс] URL: npmjs.com/package/@garage-panda/react-pdf-export (дата обращения: 12.12.2022).