Създавайте 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За да го инсталирате вместо това с мениджъра на пакети на прежди, изпълнете тази команда:
yarn добави @react-pdf/renderer
Създаване на PDF документ
За да създадете PDF документ, ще използвате компонентите Document, Page и Text на react-pdf. The
Документ отговаря за създаването на нов PDF документ и изобразяването на неговото съдържание. The Страница създава нова страница в PDF документа и изобразява съдържанието му. И накрая, на Текст компонент изобразява текстове в PDF документа.Ето пример за това как можете да създадете PDF документ, като използвате и трите компонента:
импортиране Реагирайте от"реагира";
импортиране { Документ, Текст, Страница } от'@react-pdf/renderer';конст Моят документ = () => (
Здравейте</Text>
</Page>
</Document>
);
износпо подразбиране MyDocument;
В този пример вие създавате PDF документ с една страница, съдържаща един ред текст, „Здравей“. След като създадете PDF документ, трябва да го изобразите във вашето приложение React.
За да изобразите PDF документа във вашето приложение, използвайте PDFViewer компонент, който генерира PDF документа.
Импортирайте PDFViewer компонент и обвийте документа си в него:
импортиране Реагирайте от"реагира"
импортиране { PDFViewer } от'@react-pdf/renderer';
импортиране MyDocument от"./Моят документ";функцияПриложение() {
връщане (
</PDFViewer>
)
}
износпо подразбиране Приложение
При рендиране на вашето приложение, то ще изглежда по следния начин:
Добавяне на стилове към PDF документа
За да добавите стилове към вашия PDF документ, можете да използвате react-pdf StyleSheet компонент. The StyleSheet компонент ви позволява да дефинирате персонализирани стилове за вашия PDF документ.
За да използвате Таблица със стилове компонент, импортирайте го от библиотеката react-pdf и дефинирайте своите стилове за PDF документа.
Например:
импортиране Реагирайте от"реагира";
импортиране {Документ, текст, страница, таблица със стилове} от'@react-pdf/renderer';конст стилове = StyleSheet.create({
страница: {
textAlign: "център",
marginTop: 30,
размер на шрифта: 30,
},
текст: {
цвят: „#228b22“,
}
});конст Моят документ = () => (
Здравейте</Text>
</Page>
</Document>
);
износпо подразбиране MyDocument;
В кодовия блок по-горе вие добавяте стилове към вашия PDF компонент. Вие определяте стиловете с помощта на Stylesheet.create функция. The Stylesheet.create функцията създава обект на таблица със стилове, съдържащ страница и текст стилове.
Използвайки стил опора, преминавате страница и текст стилове според вашите Страница и Текст компоненти. Това гарантира, че вашите стилове се отнасят за Страница и Текст компоненти.
Добавяне на оформления към PDF документа
За да добавите оформления към вашия PDF документ, използвате Преглед компонент. The Преглед компонент е контейнерен компонент, предоставен от библиотеката react-pdf.
The Преглед компонентът действа като HTML див—основен HTML елемент. С него обгръщате други компоненти, като например Текст компонент и дефинирайте своите оформления, като добавите стилове към Преглед компонент.
Така:
импортиране Реагирайте от"реагира";
импортиране {Документ, текст, страница, стилова таблица, изглед} от'@react-pdf/renderer';конст стилове = StyleSheet.create({
страница: {
marginTop: 30,
размер на шрифта: 30,
подплата: 20,
},
оформление: {
marginTop: 30,
flexDirection: "ред",
justifyContent: "интервал между"
}
});конст Моят документ = () => (
Здравейте</Text>
</View>Добре дошли!!!</Text>
</View>
</View>
</Page>
</Document>
);
износпо подразбиране MyDocument;
В този пример използвате Преглед компоненти за групиране на други компоненти.
Добавяне на изображения към PDF документа
Можете също така да визуализирате изображения в PDF документа с Изображение компонент, предоставен от библиотеката react-pdf. The Изображение компонент ви позволява да показвате изображения в различни формати като JPEG, PNG, SVG и много други.
The Изображение компонентът отнема a src prop, който указва URL адреса на изображението и a стил prop за добавяне на персонализирани стилове към вашите изображения.
Например:
импортиране Реагирайте от"реагира";
импортиране {Документ, страница, стилова таблица, изглед, изображение} от'@react-pdf/renderer';конст стилове = StyleSheet.create({
страница: {
подплата: 20,
подравняване на елементи: "център",
},
изображение: {
ширина: 300,
височина: 200,
}
});конст Моят документ = () => (
src=' https://example.com/image.png'
style={styles.image} />
</View>
</Page>
</Document>
);
износпо подразбиране MyDocument;
В този пример вие създавате PDF документ с една страница, която съдържа изображение. The Изображение показва изображение със стил на ширина от 300 пиксела и стил на височина от 200 пиксела.
Вероятно ще искате да включите връзки във вашия PDF документ. Връзките насочват потребителя към определен URL адрес, който може да предложи допълнителна информация, недостъпна в PDF документа. The Връзка компонент на библиотеката react-pdf ви позволява да създавате връзки във вашите PDF документи.
Компонентът Link отнема a src prop за пренасочване на потребителите, когато кликнат върху връзката. Те ще бъдат пренасочени към URL адреса, посочен в компонента src prop, ако дефинирате такъв.
За да използвате Връзка компонент, първо трябва да го импортирате от библиотеката react-pdf. След това можете да го добавите към вашия PDF документ по следния начин:
импортиране Реагирайте от"реагира";
импортиране {Документ, страница, стилова таблица, изглед, връзка} от'@react-pdf/renderer';конст стилове = StyleSheet.create({
страница: {
подплата: 20,
подравняване на елементи: "център",
},
връзка: {
цвят: '#333333',
textDecoration: 'нито един'
}
});конст Моят документ = () => (
' https://example.com' style={styles.link}>Щракнете върху мен</Link>
</View>
</Page>
</Document>
);
износпо подразбиране MyDocument;
Горният пример създава PDF документ с една страница и един изглед. В рамките на изгледа вие показвате компонент за връзка, който при щракване пренасочва потребителя към посочения URL адрес, " https://example.com.”
Сега можете да създавате PDF документи с помощта на React
React-pdf е мощна библиотека, която ви позволява да генерирате PDF документи от вашите React компоненти. Можете да създавате PDF файлове с помощта на react-pdf, след което да добавяте текст, изображения и връзки към тях.
С помощта на тази библиотека можете лесно да генерирате професионално изглеждащи PDF файлове с персонализиран стил и оформление.