Kako stvoriti PDF dokumente sa svojim React komponentama koristeći React-pdf

React je popularna JavaScript biblioteka za izradu korisničkih sučelja. Moguće je izraditi PDF datoteke iz React komponenti pomoću react-pdf biblioteke.

Ovdje ćete naučiti kako izraditi PDF dokumente s React komponentama koristeći react-pdf.

Što je React-pdf?

React-pdf je biblioteka koja vam omogućuje stvaranje PDF dokumenti iz React komponenti. Pruža skup komponenti koje možete koristiti za izradu PDF dokumenta i koristi virtualni DOM za renderiranje komponenti u PDF.

Instalacija React-pdf

Da biste instalirali react-pdf pomoću upravitelja paketa čvora, pokrenite sljedeću naredbu terminala u direktoriju vašeg projekta:

npm instaliraj @react-pdf/renderer --save

Da biste ga umjesto toga instalirali s upraviteljem paketa pređe, pokrenite ovu naredbu:

yarn add @react-pdf/renderer

Izrada PDF dokumenta

Za izradu PDF dokumenta upotrijebit ćete react-pdf komponente Document, Page i Text. The Dokument odgovorna je za stvaranje novog PDF dokumenta i renderiranje njegovog sadržaja. The

Stranica komponenta stvara novu stranicu unutar PDF dokumenta i prikazuje njezin sadržaj. Konačno, Tekst komponenta prikazuje tekstove unutar PDF dokumenta.

Evo primjera kako možete izraditi PDF dokument koristeći sve tri ove komponente:

uvoz Reagirati iz'reagirati';
uvoz { Dokument, Tekst, Stranica } iz'@react-pdf/renderer';
konst Moj dokument = () => (


Pozdrav</Text>
 </Page>
 </Document>
);
izvozzadano MojDokument;

U ovom primjeru izradite PDF dokument s jednom stranicom koja sadrži jedan redak teksta, "Hello There." Nakon što izradite PDF dokument, morate ga prikazati u svojoj React aplikaciji.

Da biste prikazali PDF dokument u svojoj aplikaciji, koristite PDFViewer komponenta koja generira PDF dokument.

Uvezi PDFViewer komponentu i zamotajte svoj dokument u nju:

uvoz Reagirati iz"reagirati"
uvoz { PDFViewer } iz'@react-pdf/renderer';
uvoz Moj dokument iz"./Moj dokument";
funkcijaaplikacija() {
povratak (


 </PDFViewer>
 )
}
izvozzadano aplikacija

Nakon renderiranja vaše aplikacije, izgledat će otprilike ovako:

Dodavanje stilova u PDF dokument

Za dodavanje stilova vašem PDF dokumentu, možete upotrijebiti react-pdf StyleSheet komponenta. The StyleSheet komponenta vam omogućuje definiranje prilagođenih stilova za vaš PDF dokument.

Za korištenje Stilska tablica komponentu, uvezite je iz react-pdf biblioteke i definirajte svoje stilove za PDF dokument.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz {Dokument, tekst, stranica, stilski list} iz'@react-pdf/renderer';
konst stilovi = StyleSheet.create({
 stranica: {
 TextAlign: 'centar',
 marginTop: 30,
 veličina fonta: 30,
 },
 tekst: {
 boja: '#228b22',
 }
});
konst Moj dokument = () => (


Pozdrav</Text>
 </Page>
 </Document>
);
izvozzadano MojDokument;

U gornjem bloku koda dodajete stilove svojoj PDF komponenti. Stilove definirate pomoću Stylesheet.create funkcija. The Stylesheet.create funkcija stvara objekt stilske tablice koji sadrži stranica i tekst stilovi.

Koristiti stil oslonac, prolaziš stranica i tekst stilova prema vašem Stranica i Tekst komponente. Ovo osigurava da se vaši stilovi primjenjuju na Stranica i Tekst komponente.

Dodavanje izgleda u PDF dokument

Da biste svom PDF dokumentu dodali izglede, koristite Pogled komponenta. The Pogled komponenta je komponenta spremnika koju pruža biblioteka react-pdf.

The Pogled komponenta se ponaša kao HTML div—temeljni HTML element. Njime zamotate druge komponente, kao što je Tekst komponentu i definirajte svoje izglede dodavanjem stilova u Pogled komponenta.

ovako:

uvoz Reagirati iz'reagirati';
uvoz {Dokument, tekst, stranica, stilski list, prikaz} iz'@react-pdf/renderer';
konst stilovi = StyleSheet.create({
 stranica: {
 marginTop: 30,
 veličina fonta: 30,
 padding: 20,
 },
 izgled: {
 marginTop: 30,
 flexDirection: 'red',
 justifyContent: 'razmak između'
 }
});
konst Moj dokument = () => (




Pozdrav</Text>
 </View>

Dobrodošli!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
izvozzadano MojDokument;

U ovom primjeru koristite Pogled komponente za grupiranje ostalih komponenti.

Dodavanje slika u PDF dokument

Također možete prikazati slike u PDF dokumentu pomoću Slika komponenta koju pruža biblioteka react-pdf. The Slika komponenta vam omogućuje prikaz slika u različitim formatima kao što su JPEG, PNG, SVG i mnogi drugi.

The Slika komponenta uzima a src prop koji navodi URL slike i a stil prop za dodavanje prilagođenih stilova vašim slikama.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz { Dokument, Stranica, Stilska tablica, Prikaz, Slika } iz'@react-pdf/renderer';
konst stilovi = StyleSheet.create({
 stranica: {
 padding: 20,
 poravnati stavke: 'centar',
 },
 slika: {
 širina: 300,
 visina: 200,
 }
});
konst Moj dokument = () => (



 src=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
izvozzadano MojDokument;

U ovom primjeru stvarate PDF dokument s jednom stranicom koja sadrži sliku. The Slika komponenta prikazuje sliku sa stilom širine od 300 piksela i stilom visine od 200 piksela.

Vjerojatno ćete htjeti uključiti veze u svoj PDF dokument. Veze usmjeravaju korisnika na određeni URL, koji može ponuditi dodatne informacije nedostupne u PDF dokumentu. The Veza komponenta biblioteke react-pdf omogućuje vam stvaranje poveznica unutar vaših PDF dokumenata.

Komponenta Link uzima a src prop za preusmjeravanje korisnika kada kliknu na vezu. Oni će biti preusmjereni na URL naveden u komponenti src prop ako ga definirate.

Za korištenje Veza komponentu, prvo je trebate uvesti iz react-pdf biblioteke. Zatim ga možete dodati svom PDF dokumentu ovako:

uvoz Reagirati iz'reagirati';
uvoz { Dokument, Stranica, Stilska tablica, Prikaz, Veza } iz'@react-pdf/renderer';
konst stilovi = StyleSheet.create({
 stranica: {
 padding: 20,
 poravnati stavke: 'centar',
 },
 veza: {
 boja: '#333333',
 textDecoration: 'ništa'
 }
});
konst Moj dokument = () => (



' https://example.com' style={styles.link}>Klikni me</Link>
 </View>
 </Page>
 </Document>
);
izvozzadano MojDokument;

Gornji primjer stvara PDF dokument s jednom stranicom i jednim prikazom. Unutar prikaza prikazujete komponentu veze koja, kada se klikne, preusmjerava korisnika na navedeni URL, " https://example.com.”

Sada možete stvarati PDF dokumente koristeći React

React-pdf je moćna biblioteka koja vam omogućuje generiranje PDF dokumenata iz vaših React komponenti. Možete izraditi PDF datoteke koristeći react-pdf, zatim im dodati tekst, slike i poveznice.

Korištenjem ove biblioteke možete jednostavno generirati PDF datoteke profesionalnog izgleda s prilagođenim stilom i izgledom.