Телефон: 8-800-350-22-65
WhatsApp: 8-800-350-22-65
Telegram: sibac
Прием заявок круглосуточно
График работы офиса: с 9.00 до 18.00 Нск (5.00 - 14.00 Мск)

Статья опубликована в рамках: Научного журнала «Студенческий» № 41(211)

Рубрика журнала: Информационные технологии

Скачать книгу(-и): скачать журнал часть 1, скачать журнал часть 2, скачать журнал часть 3, скачать журнал часть 4, скачать журнал часть 5, скачать журнал часть 6, скачать журнал часть 7

Библиографическое описание:
Берьянов М.С. ЭКСПОРТИРОВАНИЕ PDF-ФАЙЛА ИЗ HTML В React.js ПРИЛОЖЕНИИ // Студенческий: электрон. научн. журн. 2022. № 41(211). URL: https://sibac.info/journal/student/211/273718 (дата обращения: 29.03.2024).

ЭКСПОРТИРОВАНИЕ 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).

Оставить комментарий

Форма обратной связи о взаимодействии с сайтом
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.