Lag PDF-filer med letthet ved å bruke dette React-biblioteket og litt enkel kode.

React er et populært JavaScript-bibliotek for å bygge brukergrensesnitt. Det er mulig å lage PDF-filer fra React-komponenter ved å bruke react-pdf-biblioteket.

Her lærer du hvordan du lager PDF-dokumenter med React-komponenter ved hjelp av react-pdf.

Hva er React-pdf?

React-pdf er et bibliotek som lar deg lage PDF-dokumenter fra React-komponenter. Den gir et sett med komponenter som du kan bruke til å bygge PDF-dokumentet og bruker en virtuell DOM for å gjengi komponentene til PDF.

Installerer React-pdf

For å installere react-pdf ved å bruke nodepakkebehandlingen, kjør følgende terminalkommando i prosjektets katalog:

npm installer @react-pdf/renderer --save

For å installere den med garnpakkebehandleren i stedet, kjør denne kommandoen:

garn legg til @react-pdf/renderer

Opprette et PDF-dokument

For å lage et PDF-dokument bruker du react-pdfs dokument-, side- og tekstkomponenter. De Dokument komponenten er ansvarlig for å lage et nytt PDF-dokument og gjengi innholdet. De

instagram viewer
Side komponenten oppretter en ny side i PDF-dokumentet og gjengir innholdet. Til slutt, den Tekst komponent gjengir tekster i PDF-dokumentet.

Her er et eksempel på hvordan du kan lage et PDF-dokument ved å bruke alle disse tre komponentene:

import Reagere fra'reagere';
import { Dokument, tekst, side } fra'@react-pdf/renderer';
konst Mitt Dokument = () => (


Hei der</Text>
 </Page>
 </Document>
);
eksportmisligholde Mitt Dokument;

I dette eksemplet oppretter du et PDF-dokument med en enkelt side som inneholder en enkelt linje med tekst, "Hei." Etter å ha opprettet et PDF-dokument, må du gjengi det i React-applikasjonen.

For å gjengi PDF-dokumentet i applikasjonen din, bruk PDFViewer komponent, som genererer PDF-dokumentet.

Importer PDFViewer komponent og pakk inn dokumentet ditt:

import Reagere fra"reagere"
import { PDFViewer } fra'@react-pdf/renderer';
import Mitt Dokument fra"./Mitt dokument";
funksjonApp() {
komme tilbake (


 </PDFViewer>
 )
}
eksportmisligholde App

Når du gjengir søknaden din, vil den se omtrent slik ut:

Legge til stiler i PDF-dokumentet

For å legge til stiler til PDF-dokumentet ditt, kan du bruke react-pdf-er Stilark komponent. De Stilark komponent lar deg definere egendefinerte stiler for PDF-dokumentet.

For å bruke Stilark komponent, importer den fra react-pdf-biblioteket og definer stilene dine for PDF-dokumentet.

For eksempel:

import Reagere fra'reagere';
import { Dokument, tekst, side, stilark } fra'@react-pdf/renderer';
konst styles = StyleSheet.create({
 side: {
 tekstjustering: 'senter',
 margTop: 30,
 skriftstørrelse: 30,
 },
 tekst: {
 farge: «#228b22»,
 }
});


konst Mitt Dokument = () => (


Hei der</Text>
 </Page>
 </Document>
);
eksportmisligholde Mitt Dokument;

I kodeblokken ovenfor legger du til stiler til PDF-komponenten. Du definerer stilene ved å bruke Stylesheet.create funksjon. De Stylesheet.create funksjonen lager et stilarkobjekt som inneholder side og tekst stiler.

Bruker stil prop, du passerer side og tekst stiler til din Side og Tekst komponenter. Dette sikrer at stilene dine gjelder for Side og Tekst komponenter.

Legge til layouter til PDF-dokumentet

For å legge til oppsett til PDF-dokumentet ditt, bruker du Utsikt komponent. De Utsikt komponent er en beholderkomponent levert av react-pdf-biblioteket.

De Utsikt komponenten fungerer som en HTML div—et grunnleggende HTML-element. Med den pakker du inn andre komponenter, for eksempel Tekst komponent, og definer layoutene dine ved å legge til stiler til Utsikt komponent.

Som så:

import Reagere fra'reagere';
import { Dokument, Tekst, Side, Stilark, Vis } fra'@react-pdf/renderer';
konst styles = StyleSheet.create({
 side: {
 margTop: 30,
 skriftstørrelse: 30,
 polstring: 20,
 },
 oppsett: {
 margTop: 30,
 flexDirection: 'rad',
 justifyContent: "mellomrom"
 }
});


konst Mitt Dokument = () => (




Hei der</Text>
 </View>

Velkommen!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
eksportmisligholde Mitt Dokument;

I dette eksemplet bruker du Utsikt komponenter for å gruppere andre komponenter.

Legge til bilder i PDF-dokumentet

Du kan også gjengi bilder i PDF-dokumentet med Bilde komponent levert av react-pdf-biblioteket. De Bilde komponent lar deg vise bilder i ulike formater som JPEG, PNG, SVG og mange flere.

De Bilde komponent tar en src prop som spesifiserer URL-en til bildet og en stil prop for å legge til egendefinerte stiler til bildene dine.

For eksempel:

import Reagere fra'reagere';
import { Dokument, Side, Stilark, Vis, Bilde } fra'@react-pdf/renderer';
konst styles = StyleSheet.create({
 side: {
 polstring: 20,
 alignItems: 'senter',
 },
 bilde: {
 bredde: 300,
 høyde: 200,
 }
});


konst Mitt Dokument = () => (



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

I dette eksemplet lager du et PDF-dokument med en enkelt side som inneholder et bilde. De Bilde komponenten viser et bilde med en breddestil på 300 piksler og en høydestil på 200 piksler.

Du vil sannsynligvis inkludere koblinger i PDF-dokumentet ditt. Lenker leder brukeren til en angitt URL, som kan tilby tilleggsinformasjon som ikke er tilgjengelig i PDF-dokumentet. De Link komponenten i react-pdf-biblioteket lar deg lage lenker i PDF-dokumentene dine.

Link-komponenten tar en src prop for å omdirigere brukere når de klikker på lenken. De vil bli omdirigert til URL-en som er spesifisert i komponentens src prop hvis du definerer en.

For å bruke Link komponent, må du først importere den fra react-pdf-biblioteket. Du kan deretter legge den til PDF-dokumentet ditt slik:

import Reagere fra'reagere';
import { Dokument, Side, Stilark, Vis, Link } fra'@react-pdf/renderer';
konst styles = StyleSheet.create({
 side: {
 polstring: 20,
 alignItems: 'senter',
 },
 lenke: {
 farge: '#333333',
 tekstDekorasjon: 'ingen'
 }
});


konst Mitt Dokument = () => (



' https://example.com' style={styles.link}>Klikk meg</Link>
 </View>
 </Page>
 </Document>
);
eksportmisligholde Mitt Dokument;

Eksempelet ovenfor lager et PDF-dokument med én side og én visning. Innenfor visningen viser du en koblingskomponent som, når den klikkes, omdirigerer brukeren til den angitte nettadressen, " https://example.com.”

Nå kan du lage PDF-dokumenter ved å bruke React

React-pdf er et kraftig bibliotek som lar deg generere PDF-dokumenter fra dine React-komponenter. Du kan lage PDF-filer ved å bruke react-pdf, og deretter legge til tekst, bilder og lenker til dem.

Ved å bruke dette biblioteket kan du enkelt generere profesjonelt utseende PDF-filer med tilpasset stil og layout.