С легкостью создавайте PDF-файлы, используя эту библиотеку React и простой код.

React — это популярная библиотека JavaScript для создания пользовательских интерфейсов. Можно создавать PDF-файлы из компонентов React, используя библиотеку react-pdf.

Здесь вы узнаете, как создавать PDF-документы с компонентами React, используя react-pdf.

Что такое React-pdf?

React-pdf — это библиотека, позволяющая создавать PDF-документы из компонентов React. Он предоставляет набор компонентов, которые можно использовать для создания PDF-документа, и использует виртуальную модель DOM для преобразования компонентов в PDF.

Установка React-pdf

Чтобы установить react-pdf с помощью диспетчера пакетов узла, выполните следующую команду терминала в каталоге вашего проекта:

npm установить @react-pdf/renderer --save

Чтобы установить его с помощью менеджера пакетов пряжи, выполните следующую команду:

пряжа добавить @react-pdf/renderer

Создание PDF-документа

Чтобы создать PDF-документ, вы будете использовать компоненты документа, страницы и текста react-pdf.

instagram viewer
Документ Компонент отвечает за создание нового PDF-документа и отображение его содержимого. Страница Компонент создает новую страницу в документе PDF и отображает ее содержимое. Наконец, Текст Компонент отображает тексты в документе PDF.

Вот пример того, как вы можете создать документ PDF, используя все три компонента:

Импортировать Реагировать от«реагировать»;
Импортировать {Документ, текст, страница} от'@react-pdf/рендерер';
константа МойДокумент = () => (


Здравствуйте </Text>
 </Page>
 </Document>
);
экспортпо умолчанию МойДокумент;

В этом примере вы создаете документ PDF с одной страницей, содержащей одну строку текста «Привет». После создания PDF-документа вы должны визуализировать его в своем приложении React.

Чтобы отобразить PDF-документ в приложении, используйте PDFViewer компонент, который создает PDF-документ.

Импортировать PDFViewer компонент и оберните в него свой документ:

Импортировать Реагировать от"реагировать"
Импортировать { Просмотрщик PDF } от'@react-pdf/рендерер';
Импортировать МойДокумент от"./МойДокумент";
функцияПриложение() {
возвращаться (


 </PDFViewer>
 )
}
экспортпо умолчанию Приложение

После рендеринга ваше приложение будет выглядеть примерно так:

Добавление стилей в документ PDF

Чтобы добавить стили в документ PDF, вы можете использовать команду react-pdf. Таблица стилей компонент. Таблица стилей Компонент позволяет вам определять пользовательские стили для вашего PDF-документа.

Чтобы использовать Таблица стилей компонент, импортируйте его из библиотеки react-pdf и определите свои стили для документа PDF.

Например:

Импортировать Реагировать от«реагировать»;
Импортировать {Документ, текст, страница, таблица стилей} от'@react-pdf/рендерер';
константа стили = Таблица стилей.create({
 страница: {
 выравнивание текста: 'центр',
 маржаВерх: 30,
 размер шрифта: 30,
 },
 текст: {
 цвет: '# 228b22',
 }
});


константа МойДокумент = () => (


Здравствуйте </Text>
 </Page>
 </Document>
);
экспортпо умолчанию МойДокумент;

В приведенном выше блоке кода вы добавляете стили в свой PDF-компонент. Вы определяете стили, используя Таблица стилей.create функция. Таблица стилей.create Функция создает объект таблицы стилей, содержащий страница и текст стили.

Используя стиль опора, вы передаете страница и текст стили для вашего Страница и Текст компоненты. Это гарантирует, что ваши стили применяются к Страница и Текст компоненты.

Добавление макетов в документ PDF

Чтобы добавить макеты в документ PDF, вы используете Вид компонент. Вид component — это компонент-контейнер, предоставляемый библиотекой react-pdf.

Вид компонент действует как HTML див—фундаментальный элемент HTML. С его помощью вы оборачиваете другие компоненты, такие как Текст компонента и определите свои макеты, добавив стили в Вид компонент.

Вот так:

Импортировать Реагировать от«реагировать»;
Импортировать {Документ, текст, страница, таблица стилей, вид} от'@react-pdf/рендерер';
константа стили = Таблица стилей.create({
 страница: {
 маржаВерх: 30,
 размер шрифта: 30,
 заполнение: 20,
 },
 макет: {
 маржаВерх: 30,
 flexDirection: 'ряд',
 выравнивание содержимого: 'пробел между'
 }
});


константа МойДокумент = () => (




Здравствуйте </Text>
 </View>

Добро пожаловать!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
экспортпо умолчанию МойДокумент;

В этом примере вы используете Вид компоненты для группировки других компонентов.

Добавление изображений в документ PDF

Вы также можете визуализировать изображения в документе PDF с помощью Изображение компонент, предоставляемый библиотекой react-pdf. Изображение Компонент позволяет отображать изображения в различных форматах, таких как JPEG, PNG, SVG и многих других.

Изображение компонент занимает источник prop, который указывает URL-адрес изображения и стиль prop для добавления пользовательских стилей к вашим изображениям.

Например:

Импортировать Реагировать от«реагировать»;
Импортировать {Документ, Страница, Таблица стилей, Вид, Изображение} от'@react-pdf/рендерер';
константа стили = Таблица стилей.create({
 страница: {
 заполнение: 20,
 выравнивание элементов: 'центр',
 },
 изображение: {
 ширина: 300,
 высота: 200,
 }
});


константа МойДокумент = () => (



 источник=' https://example.com/image.png'
 стиль={стили.изображение} />
 </View>
 </Page>
 </Document>
);
экспортпо умолчанию МойДокумент;

В этом примере вы создаете документ PDF с одной страницей, содержащей изображение. Изображение Компонент отображает изображение со стилем ширины 300 пикселей и стилем высоты 200 пикселей.

Возможно, вы захотите включить ссылки в свой PDF-документ. Ссылки направляют пользователя на указанный URL-адрес, который может содержать дополнительную информацию, отсутствующую в документе PDF. Связь Компонент библиотеки react-pdf позволяет создавать ссылки в ваших PDF-документах.

Компонент Link принимает источник prop для перенаправления пользователей, когда они нажимают на ссылку. Они будут перенаправлены на URL, указанный в компоненте источник prop, если вы его определяете.

Чтобы использовать Связь компонент, вам сначала нужно импортировать его из библиотеки react-pdf. Затем вы можете добавить его в свой PDF-документ следующим образом:

Импортировать Реагировать от«реагировать»;
Импортировать {Документ, Страница, Таблица стилей, Вид, Ссылка} от'@react-pdf/рендерер';
константа стили = Таблица стилей.create({
 страница: {
 заполнение: 20,
 выравнивание элементов: 'центр',
 },
 связь: {
 цвет: '#333333',
 текстУкрашение: 'никто'
 }
});


константа МойДокумент = () => (



' https://example.com' style={styles.link}>Нажми на меня</Link>
 </View>
 </Page>
 </Document>
);
экспортпо умолчанию МойДокумент;

В приведенном выше примере создается документ PDF с одной страницей и одним представлением. В представлении вы отображаете компонент Link, который при нажатии перенаправляет пользователя на указанный URL-адрес, « https://example.com.”

Теперь вы можете создавать PDF-документы с помощью React

React-pdf — это мощная библиотека, которая позволяет создавать PDF-документы из ваших компонентов React. Вы можете создавать PDF-файлы с помощью react-pdf, а затем добавлять к ним текст, изображения и ссылки.

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