Lengvai kurkite PDF failus naudodami šią React biblioteką ir paprastą kodą.

„React“ yra populiari „JavaScript“ biblioteka, skirta kurti vartotojo sąsajas. Galima sukurti PDF failus iš React komponentų naudojant react-pdf biblioteką.

Čia sužinosite, kaip sukurti PDF dokumentus su React komponentais naudojant react-pdf.

Kas yra React-pdf?

React-pdf yra biblioteka, leidžianti kurti PDF dokumentai iš „React“ komponentų. Jame pateikiamas komponentų rinkinys, kurį galite naudoti kurdami PDF dokumentą, ir naudojamas virtualus DOM, kad komponentai būtų pateikti PDF formatu.

React-pdf diegimas

Norėdami įdiegti react-pdf naudodami mazgo paketų tvarkyklę, projekto kataloge paleiskite šią terminalo komandą:

npm įdiegti @react-pdf/renderer --save

Norėdami įdiegti ją naudodami siūlų paketų tvarkyklę, paleiskite šią komandą:

verpalai pridėti @react-pdf/renderer

PDF dokumento kūrimas

Norėdami sukurti PDF dokumentą, naudosite react-pdf dokumento, puslapio ir teksto komponentus. The dokumentas komponentas yra atsakingas už naujo PDF dokumento sukūrimą ir jo turinio pateikimą. The

instagram viewer
Puslapis komponentas sukuria naują PDF dokumento puslapį ir pateikia jo turinį. Galiausiai, Tekstas komponentas pateikia tekstus PDF dokumente.

Štai pavyzdys, kaip galite sukurti PDF dokumentą naudodami visus tris komponentus:

importuoti Reaguoti iš'reaguoti';
importuoti { Dokumentas, tekstas, puslapis } iš„@react-pdf/renderer“;
konst Mano dokumentas = () => (


Sveiki </Text>
 </Page>
 </Document>
);
eksportuotinumatytas „MyDocument“;

Šiame pavyzdyje sukuriate PDF dokumentą su vienu puslapiu, kuriame yra viena teksto eilutė „Sveiki“. Sukūrę PDF dokumentą, turite jį pateikti React programoje.

Norėdami pateikti PDF dokumentą programoje, naudokite PDFViewer komponentas, kuris generuoja PDF dokumentą.

Importuoti PDFViewer komponentą ir suvyniokite į jį dokumentą:

importuoti Reaguoti iš"reaguoti"
importuoti { PDFViewer } iš„@react-pdf/renderer“;
importuoti Mano dokumentas iš"./Mano dokumentas";
funkcijaProgramėlė() {
grąžinti (


 </PDFViewer>
 )
}
eksportuotinumatytas Programėlė

Pateikus jūsų programą, ji atrodys maždaug taip:

Stilių pridėjimas prie PDF dokumento

Norėdami pridėti stilių prie PDF dokumento, galite naudoti react-pdf Stiliaus lapas komponentas. The Stiliaus lapas komponentas leidžia apibrėžti pasirinktinius PDF dokumento stilius.

Norėdami naudoti Stiliaus lapas komponentą, importuokite jį iš react-pdf bibliotekos ir nustatykite PDF dokumento stilius.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti { Document, Text, Page, Stylesheet } iš„@react-pdf/renderer“;
konst styles = StyleSheet.create({
 puslapis: {
 textAlign: 'centras',
 marginTop: 30,
 šrifto dydis: 30,
 },
 tekstas: {
 spalva: „#228b22“,
 }
});


konst Mano dokumentas = () => (


Sveiki </Text>
 </Page>
 </Document>
);
eksportuotinumatytas „MyDocument“;

Aukščiau esančiame kodo bloke pridedate stilių prie PDF komponento. Stilius apibrėžiate naudodami Stylesheet.sukurti funkcija. The Stylesheet.sukurti funkcija sukuria stiliaus lapo objektą, kuriame yra puslapį ir tekstą stiliai.

Naudojant stilius rekvizitas, jūs praėjote puslapį ir tekstą stiliai jums Puslapis ir Tekstas komponentai. Tai užtikrina, kad jūsų stiliai bus taikomi Puslapis ir Tekstas komponentai.

Maketų pridėjimas prie PDF dokumento

Norėdami pridėti maketus prie PDF dokumento, naudokite Žiūrėti komponentas. The Žiūrėti komponentas yra konteinerio komponentas, kurį teikia react-pdf biblioteka.

The Žiūrėti komponentas veikia kaip HTML div—pagrindinis HTML elementas. Su juo apvyniojate kitus komponentus, tokius kaip Tekstas komponentą ir apibrėžkite savo maketus pridėdami stilių prie Žiūrėti komponentas.

Kaip taip:

importuoti Reaguoti iš'reaguoti';
importuoti { Document, Text, Page, Style Sheet, View } iš„@react-pdf/renderer“;
konst styles = StyleSheet.create({
 puslapis: {
 marginTop: 30,
 šrifto dydis: 30,
 pamušalas: 20,
 },
 išdėstymas: {
 marginTop: 30,
 flexDirection: "eilė",
 JustifyContent: "tarpas tarp"
 }
});


konst Mano dokumentas = () => (




Sveiki </Text>
 </View>

Sveiki atvykę!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
eksportuotinumatytas „MyDocument“;

Šiame pavyzdyje jūs naudojate Žiūrėti komponentus, kad sugrupuotų kitus komponentus.

Vaizdų pridėjimas prie PDF dokumento

Taip pat galite pateikti vaizdus PDF dokumente naudodami Vaizdas komponentas, pateiktas react-pdf bibliotekos. The Vaizdas komponentas leidžia rodyti vaizdus įvairiais formatais, tokiais kaip JPEG, PNG, SVG ir daugelis kitų.

The Vaizdas komponentas užima a src rekvizitas, nurodantis vaizdo URL adresą ir a stilius rekvizitas, kad pridėtumėte pasirinktinius savo vaizdų stilius.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti { Document, Page, Style Sheet, View, Image } iš„@react-pdf/renderer“;
konst styles = StyleSheet.create({
 puslapis: {
 pamušalas: 20,
 lygiuoti elementus: 'centras',
 },
 vaizdas: {
 plotis: 300,
 aukštis: 200,
 }
});


konst Mano dokumentas = () => (



 src=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
eksportuotinumatytas „MyDocument“;

Šiame pavyzdyje kuriate PDF dokumentą su vienu puslapiu, kuriame yra vaizdas. The Vaizdas komponentas rodo vaizdą su 300 pikselių pločio stiliumi ir 200 pikselių aukščio stiliumi.

Tikriausiai norėsite įtraukti nuorodas į savo PDF dokumentą. Nuorodos nukreipia vartotoją į nurodytą URL, kuris gali pasiūlyti papildomos informacijos, kurios nėra PDF dokumente. The Nuoroda React-pdf bibliotekos komponentas leidžia kurti nuorodas savo PDF dokumentuose.

Nuorodos komponentas užima a src pasiūlymas nukreipti vartotojus, kai jie spustelėja nuorodą. Jie bus nukreipti į URL, nurodytą komponente src rekvizitas, jei apibrėžiate vieną.

Norėdami naudoti Nuoroda komponentą, pirmiausia turite jį importuoti iš react-pdf bibliotekos. Tada galite pridėti jį prie savo PDF dokumento taip:

importuoti Reaguoti iš'reaguoti';
importuoti { Document, Page, Style Sheet, View, Link } iš„@react-pdf/renderer“;
konst styles = StyleSheet.create({
 puslapis: {
 pamušalas: 20,
 lygiuoti elementus: 'centras',
 },
 nuoroda: {
 spalva: '#333333',
 teksto apdaila: 'nė vienas'
 }
});


konst Mano dokumentas = () => (



' https://example.com' style={styles.link}>Spustelėkite mane</Link>
 </View>
 </Page>
 </Document>
);
eksportuotinumatytas „MyDocument“;

Pirmiau pateiktame pavyzdyje sukuriamas PDF dokumentas su vienu puslapiu ir vienu rodiniu. Rodinyje rodomas nuorodos komponentas, kuris spustelėjus nukreipia vartotoją į nurodytą URL, „ https://example.com.”

Dabar galite kurti PDF dokumentus naudodami „React“.

„React-pdf“ yra galinga biblioteka, leidžianti generuoti PDF dokumentus iš „React“ komponentų. Galite sukurti PDF failus naudodami react-pdf, tada pridėti prie jų teksto, vaizdų ir nuorodų.

Naudodami šią biblioteką galite lengvai generuoti profesionaliai atrodančius PDF failus su pasirinktu stiliumi ir išdėstymu.