Креирајте ПДФ-ове са лакоћом користећи ову Реацт библиотеку и неки једноставан код.

Реацт је популарна ЈаваСцрипт библиотека за изградњу корисничких интерфејса. Могуће је креирати ПДФ датотеке из Реацт компоненти користећи реацт-пдф библиотеку.

Овде ћете научити како да креирате ПДФ документе са Реацт компонентама користећи реацт-пдф.

Шта је Реацт-пдф?

Реацт-пдф је библиотека која вам омогућава да креирате ПДФ документи из Реацт компоненти. Пружа скуп компоненти које можете да користите за прављење ПДФ документа и користи виртуелни ДОМ за приказивање компоненти у ПДФ.

Инсталирање Реацт-пдф-а

Да бисте инсталирали реацт-пдф помоћу менаџера пакета чвора, покрените следећу терминалну команду у директоријуму вашег пројекта:

нпм инсталл @реацт-пдф/рендерер --саве

Да бисте га уместо тога инсталирали помоћу менаџера пакета иарн, покрените ову команду:

предиво додати @реацт-пдф/рендерер

Креирање ПДФ документа

Да бисте креирали ПДФ документ, користићете компоненте Реацт-пдф-а Доцумент, Паге и Тект. Тхе

instagram viewer
Документ компонента је одговорна за креирање новог ПДФ документа и приказивање његовог садржаја. Тхе Страна компонента креира нову страницу унутар ПДФ документа и приказује њен садржај. Коначно, Текст компонента приказује текстове унутар ПДФ документа.

Ево примера како можете да креирате ПДФ документ користећи све три ове компоненте:

увоз Реаговати из'реаговати';
увоз { Документ, текст, страница } из'@реацт-пдф/рендерер';
конст МиДоцумент = () => (


Здраво тамо</Text>
 </Page>
 </Document>
);
извозУобичајено МиДоцумент;

У овом примеру, креирате ПДФ документ са једном страницом која садржи један ред текста, „Здраво. Након креирања ПДФ документа, морате га приказати у својој Реацт апликацији.

Да бисте приказали ПДФ документ у својој апликацији, користите ПДФВиевер компонента, која генерише ПДФ документ.

Увезите ПДФВиевер компоненту и умотајте свој документ у њу:

увоз Реаговати из"реаговати"
увоз { ПДФВиевер } из'@реацт-пдф/рендерер';
увоз МиДоцумент из"./МиДоцумент";
функцијаАпликација() {
повратак (


 </PDFViewer>
 )
}
извозУобичајено Апликација

Након приказивања ваше апликације, изгледаће отприлике овако:

Додавање стилова у ПДФ документ

Да бисте додали стилове свом ПДФ документу, можете користити реацт-пдф СтилеСхеет саставни део. Тхе СтилеСхеет компонента вам омогућава да дефинишете прилагођене стилове за ваш ПДФ документ.

Да бисте користили Стилесхеет компоненту, увезите је из библиотеке реацт-пдф и дефинишите своје стилове за ПДФ документ.

На пример:

увоз Реаговати из'реаговати';
увоз { Документ, текст, страница, стилска листа} из'@реацт-пдф/рендерер';
конст стилес = СтилеСхеет.цреате({
 страна: {
 Поравнање текста: 'центар',
 маргинТоп: 30,
 Величина фонта: 30,
 },
 текст: {
 боја: '#228б22',
 }
});


конст МиДоцумент = () => (


Здраво тамо</Text>
 </Page>
 </Document>
);
извозУобичајено МиДоцумент;

У блоку кода изнад, додајете стилове вашој ПДФ компоненти. Ви дефинишете стилове користећи Стилесхеет.цреате функција. Тхе Стилесхеет.цреате функција креира објекат листе стилова који садржи страна и текст стилова.

Помоћу стил проп, прођеш страна и текст стилова за ваше Страна и Текст компоненте. Ово осигурава да се ваши стилови примењују на Страна и Текст компоненте.

Додавање распореда у ПДФ документ

Да бисте додали изгледе свом ПДФ документу, користите Поглед саставни део. Тхе Поглед компонента је компонента контејнера коју обезбеђује библиотека реацт-пдф.

Тхе Поглед компонента се понаша као ХТМЛ див—фундаментални ХТМЛ елемент. Са њим умотавате друге компоненте, као што је Текст компоненту и дефинишите своје распореде додавањем стилова у Поглед саставни део.

Овако:

увоз Реаговати из'реаговати';
увоз { Доцумент, Тект, Паге, СтилеСхеет, Виев } из'@реацт-пдф/рендерер';
конст стилес = СтилеСхеет.цреате({
 страна: {
 маргинТоп: 30,
 Величина фонта: 30,
 паддинг: 20,
 },
 распоред: {
 маргинТоп: 30,
 флекДирецтион: 'ред',
 јустифиЦонтент: 'размак између'
 }
});


конст МиДоцумент = () => (




Здраво тамо</Text>
 </View>

Добродошли!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
извозУобичајено МиДоцумент;

У овом примеру користите Поглед компоненте да групишу остале компоненте.

Додавање слика у ПДФ документ

Такође можете да прикажете слике у ПДФ документу помоћу Слика компонента коју обезбеђује библиотека реацт-пдф. Тхе Слика компонента вам омогућава да прикажете слике у различитим форматима као што су ЈПЕГ, ПНГ, СВГ и многи други.

Тхе Слика компонента узима а срц проп који специфицира УРЛ слике и а стил проп за додавање прилагођених стилова вашим сликама.

На пример:

увоз Реаговати из'реаговати';
увоз { Документ, страница, СтилеСхеет, Приказ, Слика} из'@реацт-пдф/рендерер';
конст стилес = СтилеСхеет.цреате({
 страна: {
 паддинг: 20,
 алигнИтемс: 'центар',
 },
 слика: {
 ширина: 300,
 висина: 200,
 }
});


конст МиДоцумент = () => (



 срц=' https://example.com/image.png'
 стиле={стилес.имаге} />
 </View>
 </Page>
 </Document>
);
извозУобичајено МиДоцумент;

У овом примеру, креирате ПДФ документ са једном страницом која садржи слику. Тхе Слика компонента приказује слику са стилом ширине од 300 пиксела и стилом висине од 200 пиксела.

Вероватно ћете желети да укључите везе у свој ПДФ документ. Везе усмеравају корисника на одређену УРЛ адресу, која може понудити додатне информације које нису доступне у ПДФ документу. Тхе Линк компонента реацт-пдф библиотеке вам омогућава да креирате везе унутар ваших ПДФ докумената.

Компонента Линк заузима а срц проп за преусмеравање корисника када кликну на везу. Они ће бити преусмерени на УРЛ наведен у компоненти срц проп ако га дефинишете.

Да бисте користили Линк компоненту, прво морате да је увезете из библиотеке реацт-пдф. Затим га можете додати у свој ПДФ документ на следећи начин:

увоз Реаговати из'реаговати';
увоз { Доцумент, Паге, СтилеСхеет, Виев, Линк } из'@реацт-пдф/рендерер';
конст стилес = СтилеСхеет.цреате({
 страна: {
 паддинг: 20,
 алигнИтемс: 'центар',
 },
 линк: {
 боја: '#333333',
 тектДецоратион: 'ниједан'
 }
});


конст МиДоцумент = () => (



' https://example.com' стиле={стилес.линк}>Кликни на мене</Link>
 </View>
 </Page>
 </Document>
);
извозУобичајено МиДоцумент;

Горњи пример креира ПДФ документ са једном страницом и једним приказом. У оквиру приказа, приказујете компоненту везе која, када се кликне, преусмерава корисника на наведену УРЛ адресу, „ https://example.com.”

Сада можете креирати ПДФ документе користећи Реацт

Реацт-пдф је моћна библиотека која вам омогућава да генеришете ПДФ документе из ваших Реацт компоненти. Можете креирати ПДФ датотеке користећи реацт-пдф, а затим им додати текст, слике и везе.

Коришћењем ове библиотеке можете лако да генеришете ПДФ датотеке професионалног изгледа са прилагођеним стилом и изгледом.