Selle Reacti teegi ja mõne lihtsa koodi abil saate hõlpsalt PDF-faile luua.

React on populaarne JavaScripti teek kasutajaliideste loomiseks. Reacti komponentidest on võimalik luua PDF-faile kasutades react-pdf teeki.

Siit saate teada, kuidas luua PDF-dokumente Reacti komponentidega, kasutades react-pdf-i.

Mis on React-pdf?

React-pdf on teek, mis võimaldab teil luua PDF dokumendid React komponentidest. See pakub komplekti komponente, mida saate kasutada oma PDF-dokumendi koostamiseks, ja kasutab komponentide PDF-vormingus renderdamiseks virtuaalset DOM-i.

React-pdf installimine

React-pdf-i installimiseks sõlme paketihalduri abil käivitage oma projekti kataloogis järgmine terminalikäsk:

npm install @react-pdf/renderer --save

Selle installimiseks selle asemel lõngapaketihalduriga käivitage see käsk:

lõng lisa @react-pdf/renderer

PDF-dokumendi loomine

PDF-dokumendi loomiseks kasutate react-pdf-i komponente Document, Page ja Text. The Dokument komponent vastutab uue PDF-dokumendi loomise ja selle sisu renderdamise eest. The

instagram viewer
Lehekülg komponent loob PDF-dokumendis uue lehe ja renderdab selle sisu. Lõpuks, Tekst komponent renderdab PDF-dokumendis tekste.

Siin on näide, kuidas saate luua PDF-dokumendi, kasutades kõiki neid kolme komponenti.

importida Reageerige alates'reageeri';
importida { Dokument, tekst, leht } alates'@react-pdf/renderdaja';
konst MinuDokument = () => (


Tere siin</Text>
 </Page>
 </Document>
);
eksportidavaikimisi MyDocument;

Selles näites loote PDF-dokumendi, millel on üks leht, mis sisaldab ühte tekstirida „Tere. Pärast PDF-dokumendi loomist peate selle oma Reacti rakenduses renderdama.

PDF-dokumendi renderdamiseks oma rakenduses kasutage PDFViewer komponent, mis genereerib PDF-dokumendi.

Importige PDFViewer komponent ja mähkige oma dokument sellesse:

importida Reageerige alates"reageerida"
importida { PDFViewer } alates'@react-pdf/renderdaja';
importida MinuDokument alates"./Minu dokument";
funktsiooniRakendus() {
tagasi (


 </PDFViewer>
 )
}
eksportidavaikimisi Rakendus

Teie rakenduse renderdamisel näeb see välja umbes selline:

Stiilide lisamine PDF-dokumendile

PDF-dokumendile stiilide lisamiseks võite kasutada react-pdf-e Stiilitabel komponent. The Stiilitabel komponent võimaldab teil määratleda oma PDF-dokumendi jaoks kohandatud stiile.

Et kasutada Stiilitabel importige see react-pdf teegist ja määrake PDF-dokumendi stiilid.

Näiteks:

importida Reageerige alates'reageeri';
importida { Dokument, tekst, leht, stiilileht } alates'@react-pdf/renderdaja';
konst styles = StyleSheet.create({
 leht: {
 textAlign: 'Keskus',
 marginTop: 30,
 fondi suurus: 30,
 },
 tekst: {
 värv: '#228b22',
 }
});


konst MinuDokument = () => (


Tere siin</Text>
 </Page>
 </Document>
);
eksportidavaikimisi MyDocument;

Ülaltoodud koodiplokis lisate oma PDF-komponendile stiile. Saate määratleda stiilid kasutades Stylesheet.create funktsiooni. The Stylesheet.create funktsioon loob stiilitabeli objekti, mis sisaldab lehel ja tekst stiilid.

Kasutades stiilis prop, sa läbid lehel ja tekst stiile teie jaoks Lehekülg ja Tekst komponendid. See tagab, et teie stiilid kehtivad Lehekülg ja Tekst komponendid.

Paigutuste lisamine PDF-dokumendile

PDF-dokumendile paigutuste lisamiseks kasutage Vaade komponent. The Vaade komponent on konteineri komponent, mille pakub react-pdf teegi.

The Vaade komponent toimib nagu HTML div—HTML-i põhielement. Sellega mähite kokku muud komponendid, näiteks Tekst komponenti ja määratlege oma paigutused, lisades sellele stiile Vaade komponent.

Nagu nii:

importida Reageerige alates'reageeri';
importida { Dokument, tekst, leht, stiilileht, vaade } alates'@react-pdf/renderdaja';
konst styles = StyleSheet.create({
 leht: {
 marginTop: 30,
 fondi suurus: 30,
 polsterdus: 20,
 },
 paigutus: {
 marginTop: 30,
 flexDirection: 'rida',
 õigustaSisu: "ruum-vahe"
 }
});


konst MinuDokument = () => (




Tere siin</Text>
 </View>

Tere tulemast!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
eksportidavaikimisi MyDocument;

Selles näites kasutate Vaade komponendid teiste komponentide rühmitamiseks.

Piltide lisamine PDF-dokumendile

Samuti saate PDF-dokumendis olevaid pilte renderdada rakendusega Pilt komponent, mille pakub react-pdf teegi. The Pilt komponent võimaldab teil kuvada pilte erinevates vormingutes, nagu JPEG, PNG, SVG ja palju muud.

The Pilt komponent võtab a src prop, mis määrab pildi URL-i ja a stiilis rekvisiit, et lisada oma piltidele kohandatud stiile.

Näiteks:

importida Reageerige alates'reageeri';
importida { Dokument, leht, stiilileht, vaade, pilt } alates'@react-pdf/renderdaja';
konst styles = StyleSheet.create({
 leht: {
 polsterdus: 20,
 joonda üksused: 'Keskus',
 },
 pilt: {
 laius: 300,
 kõrgus: 200,
 }
});


konst MinuDokument = () => (



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

Selles näites loote PDF-dokumendi, millel on üks lehekülg, mis sisaldab pilti. The Pilt komponent kuvab pildi laiuse stiiliga 300 pikslit ja kõrguse stiiliga 200 pikslit.

Tõenäoliselt soovite oma PDF-dokumenti lisada linke. Lingid suunavad kasutaja määratud URL-ile, mis võib pakkuda lisateavet, mis pole PDF-dokumendis saadaval. The Link React-pdf teegi komponent võimaldab teil PDF-dokumentides linke luua.

Link komponent võtab a src kasutajate ümbersuunamiseks, kui nad lingil klõpsavad. Need suunatakse komponendis määratud URL-ile src prop, kui ühe määratlete.

Et kasutada Link komponent, peate selle esmalt importima react-pdf teegist. Seejärel saate selle oma PDF-dokumendile lisada järgmiselt:

importida Reageerige alates'reageeri';
importida { Dokument, leht, stiilileht, vaade, link } alates'@react-pdf/renderdaja';
konst styles = StyleSheet.create({
 leht: {
 polsterdus: 20,
 joonda üksused: 'Keskus',
 },
 link: {
 värv: '#333333',
 tekstDekoratsioon: 'mitte ükski'
 }
});


konst MinuDokument = () => (



' https://example.com' style={styles.link}>Klõpsake mind</Link>
 </View>
 </Page>
 </Document>
);
eksportidavaikimisi MyDocument;

Ülaltoodud näide loob ühe lehekülje ja ühe vaatega PDF-dokumendi. Kuvas kuvatakse lingi komponent, mis klõpsamisel suunab kasutaja määratud URL-ile, " https://example.com.”

Nüüd saate Reacti abil PDF-dokumente luua

React-pdf on võimas teek, mis võimaldab teil Reacti komponentidest PDF-dokumente genereerida. Saate luua PDF-faile kasutades react-pdf-i, seejärel lisada neile teksti, pilte ja linke.

Seda teeki kasutades saate hõlpsasti luua professionaalse välimusega kohandatud stiili ja paigutusega PDF-faile.