Z lahkoto ustvarite PDF-je s to knjižnico React in nekaj preproste kode.

React je priljubljena knjižnica JavaScript za izdelavo uporabniških vmesnikov. Datoteke PDF je mogoče ustvariti iz komponent React s knjižnico react-pdf.

Tukaj se boste naučili, kako ustvariti dokumente PDF s komponentami React z uporabo react-pdf.

Kaj je React-pdf?

React-pdf je knjižnica, ki vam omogoča ustvarjanje PDF dokumenti iz komponent React. Ponuja nabor komponent, ki jih lahko uporabite za izdelavo dokumenta PDF, in uporablja navidezni DOM za upodabljanje komponent v PDF.

Namestitev React-pdf

Če želite namestiti react-pdf z upraviteljem paketov vozlišč, zaženite naslednji terminalski ukaz v imeniku vašega projekta:

npm namestite @react-pdf/renderer --save

Če ga želite namesto tega namestiti z upraviteljem paketov preje, zaženite ta ukaz:

yarn add @react-pdf/renderer

Ustvarjanje dokumenta PDF

Če želite ustvariti dokument PDF, boste uporabili komponente dokumenta, strani in besedila react-pdf. The Dokument komponenta je odgovorna za ustvarjanje novega dokumenta PDF in upodabljanje njegove vsebine. The

instagram viewer
Stran komponenta ustvari novo stran v dokumentu PDF in upodobi njeno vsebino. Končno, Besedilo komponenta upodablja besedila v dokumentu PDF.

Tukaj je primer, kako lahko ustvarite dokument PDF z uporabo vseh treh komponent:

uvoz Reagiraj od'reagirati';
uvoz {Dokument, besedilo, stran} od'@react-pdf/renderer';
konst Moj dokument = () => (


Pozdravljeni</Text>
 </Page>
 </Document>
);
izvozprivzeto Moj dokument;

V tem primeru ustvarite dokument PDF z eno samo stranjo, ki vsebuje eno vrstico besedila, »Pozdravljeni«. Ko ustvarite dokument PDF, ga morate upodobiti v svoji aplikaciji React.

Za upodabljanje dokumenta PDF v vaši aplikaciji uporabite PDFViewer komponento, ki ustvari dokument PDF.

Uvozite PDFViewer komponento in vanjo zavijte svoj dokument:

uvoz Reagiraj od"reagirati"
uvoz {PDFViewer} od'@react-pdf/renderer';
uvoz Moj dokument od"./Moj dokument";
funkcijoaplikacija() {
vrnitev (


 </PDFViewer>
 )
}
izvozprivzeto aplikacija

Ko bo vaša aplikacija upodobljena, bo videti nekako takole:

Dodajanje slogov v dokument PDF

Če želite dokumentu PDF dodati sloge, lahko uporabite react-pdf StyleSheet komponento. The StyleSheet vam omogoča, da določite sloge po meri za svoj dokument PDF.

Za uporabo Slogovna tabela komponento, jo uvozite iz knjižnice react-pdf in določite svoje sloge za dokument PDF.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz {Dokument, besedilo, stran, slogovna tabela} od'@react-pdf/renderer';
konst styles = StyleSheet.create({
 stran: {
 textAlign: 'center',
 marginTop: 30,
 velikost pisave: 30,
 },
 besedilo: {
 barva: '#228b22',
 }
});


konst Moj dokument = () => (


Pozdravljeni</Text>
 </Page>
 </Document>
);
izvozprivzeto Moj dokument;

V zgornjem bloku kode dodajate sloge svoji komponenti PDF. Sloge določite z uporabo Stylesheet.create funkcijo. The Stylesheet.create funkcija ustvari objekt slogovne datoteke, ki vsebuje strani in besedilo stilov.

Uporabljati stil prop, preneseš strani in besedilo stilov po vašem Stran in Besedilo komponente. To zagotavlja, da se vaši slogi nanašajo na Stran in Besedilo komponente.

Dodajanje postavitev v dokument PDF

Če želite dokumentu PDF dodati postavitve, uporabite Pogled komponento. The Pogled komponenta je komponenta vsebnika, ki jo nudi knjižnica react-pdf.

The Pogled komponenta deluje kot HTML div—temeljni element HTML. Z njim zavijete druge komponente, kot je npr Besedilo komponento in določite svoje postavitve z dodajanjem slogov Pogled komponento.

takole:

uvoz Reagiraj od'reagirati';
uvoz {Dokument, besedilo, stran, slogovna tabela, pogled} od'@react-pdf/renderer';
konst styles = StyleSheet.create({
 stran: {
 marginTop: 30,
 velikost pisave: 30,
 oblazinjenje: 20,
 },
 postavitev: {
 marginTop: 30,
 flexDirection: 'vrstica',
 justifyContent: 'presledek med'
 }
});


konst Moj dokument = () => (




Pozdravljeni</Text>
 </View>

Dobrodošli!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
izvozprivzeto Moj dokument;

V tem primeru uporabite Pogled komponente za združevanje drugih komponent.

Dodajanje slik v dokument PDF

Slike v dokumentu PDF lahko upodabljate tudi z Slika komponenta, ki jo zagotavlja knjižnica react-pdf. The Slika vam omogoča prikaz slik v različnih formatih, kot so JPEG, PNG, SVG in mnogi drugi.

The Slika komponenta traja a src prop, ki določa URL slike in a stil prop za dodajanje slogov po meri vašim slikam.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz {Dokument, stran, slogovna tabela, pogled, slika} od'@react-pdf/renderer';
konst styles = StyleSheet.create({
 stran: {
 oblazinjenje: 20,
 alignItems: 'center',
 },
 slika: {
 premer: 300,
 višina: 200,
 }
});


konst Moj dokument = () => (



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

V tem primeru ustvarjate dokument PDF z eno stranjo, ki vsebuje sliko. The Slika komponenta prikaže sliko s slogom širine 300 slikovnih pik in slogom višine 200 slikovnih pik.

Verjetno boste želeli v dokument PDF vključiti povezave. Povezave usmerijo uporabnika na določen URL, ki lahko ponuja dodatne informacije, ki niso na voljo v dokumentu PDF. The Povezava komponenta knjižnice react-pdf vam omogoča ustvarjanje povezav v vaših dokumentih PDF.

Komponenta povezave zavzame a src prop za preusmeritev uporabnikov, ko kliknejo povezavo. Preusmerjeni bodo na URL, naveden v komponenti src prop, če ga definirate.

Za uporabo Povezava komponento, jo morate najprej uvoziti iz knjižnice react-pdf. Nato ga lahko dodate svojemu dokumentu PDF takole:

uvoz Reagiraj od'reagirati';
uvoz {Dokument, stran, slogovna tabela, pogled, povezava} od'@react-pdf/renderer';
konst styles = StyleSheet.create({
 stran: {
 oblazinjenje: 20,
 alignItems: 'center',
 },
 povezava: {
 barva: '#333333',
 textDecoration: 'brez'
 }
});


konst Moj dokument = () => (



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

Zgornji primer ustvari dokument PDF z eno stranjo in enim pogledom. Znotraj pogleda prikazujete komponento povezave, ki ob kliku uporabnika preusmeri na določen URL, " https://example.com.”

Zdaj lahko ustvarite dokumente PDF z uporabo React

React-pdf je zmogljiva knjižnica, ki vam omogoča ustvarjanje dokumentov PDF iz komponent React. Datoteke PDF lahko ustvarite z uporabo react-pdf, nato pa jim dodate besedilo, slike in povezave.

Z uporabo te knjižnice lahko preprosto ustvarite datoteke PDF profesionalnega videza s slogom in postavitvijo po meri.