Kuinka luoda PDF-dokumentteja React-komponenteilla React-pdf: n avulla

React on suosittu JavaScript-kirjasto käyttöliittymien rakentamiseen. React-komponenteista on mahdollista luoda PDF-tiedostoja react-pdf-kirjaston avulla.

Täällä opit luomaan PDF-dokumentteja React-komponenteilla käyttämällä react-pdf: tä.

Mikä on React-pdf?

React-pdf on kirjasto, jonka avulla voit luoda PDF-dokumentteja React-komponenteista. Se tarjoaa joukon komponentteja, joita voit käyttää PDF-dokumentin rakentamiseen, ja käyttää virtuaalista DOM: ia komponenttien hahmontamiseen PDF-muotoon.

Asennetaan React-pdf

Asenna react-pdf solmun pakettien hallinnan avulla suorittamalla seuraava päätekomento projektisi hakemistossa:

npm asennus @react-pdf/renderer --tallenna

Jos haluat asentaa sen langan paketinhallinnan avulla, suorita tämä komento:

lanka lisää @react-pdf/renderer

PDF-dokumentin luominen

PDF-dokumentin luomiseen käytetään react-pdf: n Dokumentti-, Sivu- ja Tekstikomponentteja. The Asiakirja komponentti vastaa uuden PDF-dokumentin luomisesta ja sen sisällön renderöimisestä. The

Sivu komponentti luo uuden sivun PDF-dokumenttiin ja renderöi sen sisällön. Lopuksi, Teksti komponentti tekee tekstit PDF-dokumentin sisällä.

Tässä on esimerkki siitä, kuinka voit luoda PDF-dokumentin käyttämällä kaikkia kolmea komponenttia:

tuonti Reagoi alkaen'reagoi';
tuonti { Asiakirja, teksti, sivu } alkaen'@react-pdf/renderer';
konst MyDocument = () => (


Hei siellä</Text>
 </Page>
 </Document>
);
viedäoletuksena MyDocument;

Tässä esimerkissä luot PDF-dokumentin, jossa on yksi sivu, joka sisältää yhden rivin tekstiä, "Hei". Kun olet luonut PDF-dokumentin, sinun on renderöitävä se React-sovelluksessasi.

Voit renderöidä PDF-dokumentin sovelluksessasi käyttämällä PDFViewer komponentti, joka luo PDF-dokumentin.

Tuo PDFViewer komponentti ja kääri asiakirjasi siihen:

tuonti Reagoi alkaen"reagoi"
tuonti { PDFViewer } alkaen'@react-pdf/renderer';
tuonti MyDocument alkaen"./MyDocument";
toimintoSovellus() {
palata (


 </PDFViewer>
 )
}
viedäoletuksena Sovellus

Kun sovelluksesi on renderöity, se näyttää suunnilleen tältä:

Tyylien lisääminen PDF-dokumenttiin

Voit lisätä tyylejä PDF-dokumenttiin käyttämällä react-pdf-tiedostoja Tyylitaulukko komponentti. The Tyylitaulukko komponentin avulla voit määrittää mukautettuja tyylejä PDF-asiakirjallesi.

Käyttääksesi Tyylitaulukko komponentti, tuo se react-pdf-kirjastosta ja määritä PDF-dokumentin tyylit.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti { Asiakirja, teksti, sivu, tyylitaulukko } alkaen'@react-pdf/renderer';
konst styles = StyleSheet.create({
 sivu: {
 textAlign: 'keskusta',
 marginTop: 30,
 Fonttikoko: 30,
 },
 teksti: {
 väri: '#228b22',
 }
});
konst MyDocument = () => (


Hei siellä</Text>
 </Page>
 </Document>
);
viedäoletuksena MyDocument;

Yllä olevassa koodilohkossa lisäät tyylejä PDF-komponenttiin. Voit määrittää tyylit käyttämällä Stylesheet.create toiminto. The Stylesheet.create -toiminto luo tyylitaulukkoobjektin, joka sisältää sivu ja teksti tyylejä.

Käyttämällä tyyli prop, ohitat sivu ja teksti tyylejä sinulle Sivu ja Teksti komponentit. Tämä varmistaa, että tyylisi sopivat Sivu ja Teksti komponentit.

Asettelujen lisääminen PDF-dokumenttiin

Voit lisätä asetteluja PDF-dokumenttiin käyttämällä Näytä komponentti. The Näytä komponentti on react-pdf-kirjaston tarjoama konttikomponentti.

The Näytä komponentti toimii kuin HTML div—HTML-peruselementti. Sen avulla käärit muita komponentteja, kuten Teksti komponenttia ja määritä asettelusi lisäämällä tyylejä Näytä komponentti.

Niin kuin:

tuonti Reagoi alkaen'reagoi';
tuonti { Asiakirja, teksti, sivu, tyylitaulukko, näkymä } alkaen'@react-pdf/renderer';
konst styles = StyleSheet.create({
 sivu: {
 marginTop: 30,
 Fonttikoko: 30,
 pehmuste: 20,
 },
 ulkoasu: {
 marginTop: 30,
 flexDirection: 'rivi',
 perustellaContent: "välitila"
 }
});
konst MyDocument = () => (




Hei siellä</Text>
 </View>

Tervetuloa!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
viedäoletuksena MyDocument;

Tässä esimerkissä käytät Näytä komponentit ryhmitellä muita komponentteja.

Kuvien lisääminen PDF-dokumenttiin

Voit myös renderöidä PDF-dokumentissa olevia kuvia Kuva react-pdf-kirjaston tarjoama komponentti. The Kuva komponentin avulla voit näyttää kuvia eri muodoissa, kuten JPEG, PNG, SVG ja paljon muuta.

The Kuva komponentti kestää a src prop, joka määrittää kuvan URL-osoitteen ja a tyyli prop lisätäksesi kuviisi mukautettuja tyylejä.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti { Asiakirja, sivu, tyylitaulukko, näkymä, kuva } alkaen'@react-pdf/renderer';
konst styles = StyleSheet.create({
 sivu: {
 pehmuste: 20,
 alignItems: 'keskusta',
 },
 kuva: {
 leveys: 300,
 korkeus: 200,
 }
});
konst MyDocument = () => (



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

Tässä esimerkissä olet luomassa PDF-dokumenttia, jossa on yksi sivu, joka sisältää kuvan. The Kuva komponentti näyttää kuvan, jonka leveystyyli on 300 pikseliä ja korkeustyyli 200 pikseliä.

Haluat todennäköisesti sisällyttää linkkejä PDF-dokumenttiin. Linkit ohjaavat käyttäjän määritettyyn URL-osoitteeseen, joka voi tarjota lisätietoa, jota ei ole saatavilla PDF-dokumentissa. The Linkki react-pdf-kirjaston komponentin avulla voit luoda linkkejä PDF-dokumentteihin.

Linkki-komponentti kestää a src ohje ohjata käyttäjiä, kun he napsauttavat linkkiä. Ne ohjataan komponentin URL-osoitteeseen src prop, jos määrittelet sellaisen.

Käyttääksesi Linkki komponentti, sinun on ensin tuotava se react-pdf-kirjastosta. Voit sitten lisätä sen PDF-dokumenttiin seuraavasti:

tuonti Reagoi alkaen'reagoi';
tuonti { Asiakirja, sivu, tyylitaulukko, näkymä, linkki } alkaen'@react-pdf/renderer';
konst styles = StyleSheet.create({
 sivu: {
 pehmuste: 20,
 alignItems: 'keskusta',
 },
 linkki: {
 väri: '#333333',
 tekstiSisustus: 'ei mitään'
 }
});
konst MyDocument = () => (



' https://example.com' style={styles.link}>Napsauta minua</Link>
 </View>
 </Page>
 </Document>
);
viedäoletuksena MyDocument;

Yllä oleva esimerkki luo PDF-dokumentin, jossa on yksi sivu ja yksi näkymä. Näkymässä näytetään linkkikomponentti, joka napsautettuna ohjaa käyttäjän määritettyyn URL-osoitteeseen, " https://example.com.”

Nyt voit luoda PDF-dokumentteja Reactilla

React-pdf on tehokas kirjasto, jonka avulla voit luoda PDF-dokumentteja React-komponenteistasi. Voit luoda PDF-tiedostoja react-pdf: llä ja lisätä niihin sitten tekstiä, kuvia ja linkkejä.

Käyttämällä tätä kirjastoa voit helposti luoda ammattimaisen näköisiä PDF-tiedostoja mukautetulla tyylillä ja asettelulla.