Opret PDF'er med lethed ved hjælp af dette React-bibliotek og noget simpel kode.

React er et populært JavaScript-bibliotek til opbygning af brugergrænseflader. Det er muligt at oprette PDF-filer fra React-komponenter ved hjælp af react-pdf-biblioteket.

Her lærer du, hvordan du opretter PDF-dokumenter med React-komponenter ved hjælp af react-pdf.

Hvad er React-pdf?

React-pdf er et bibliotek, der giver dig mulighed for at oprette PDF-dokumenter fra React-komponenter. Det giver et sæt komponenter, som du kan bruge til at bygge dit PDF-dokument og bruger en virtuel DOM til at gengive komponenterne til PDF.

Installation af React-pdf

For at installere react-pdf ved hjælp af node-pakkehåndteringen skal du køre følgende terminalkommando i dit projekts bibliotek:

npm installer @react-pdf/renderer --save

For at installere det med garnpakkehåndteringen i stedet, skal du køre denne kommando:

garn tilføje @react-pdf/renderer

Oprettelse af et PDF-dokument

For at oprette et PDF-dokument skal du bruge react-pdf's dokument-, side- og tekstkomponenter. Det

instagram viewer
Dokument komponent er ansvarlig for at oprette et nyt PDF-dokument og gengive dets indhold. Det Side komponent opretter en ny side i PDF-dokumentet og gengiver dets indhold. Endelig Tekst komponent gengiver tekster i PDF-dokumentet.

Her er et eksempel på, hvordan du kan oprette et PDF-dokument ved hjælp af alle disse tre komponenter:

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


Hej med dig</Text>
 </Page>
 </Document>
);
eksportStandard Mit Dokument;

I dette eksempel opretter du et PDF-dokument med en enkelt side, der indeholder en enkelt tekstlinje, "Hej der." Når du har oprettet et PDF-dokument, skal du gengive det i din React-applikation.

For at gengive PDF-dokumentet i din applikation skal du bruge PDFViewer komponent, som genererer PDF-dokumentet.

Importer PDFViewer komponent og pak dit dokument ind i det:

importere Reagere fra"reagere"
importere { PDFViewer } fra'@react-pdf/renderer';
importere Mit Dokument fra"./Mit Dokument";
fungereApp() {
Vend tilbage (


 </PDFViewer>
 )
}
eksportStandard App

Når du gengiver din ansøgning, vil den se sådan her ud:

Tilføjelse af typografier til PDF-dokumentet

For at tilføje stilarter til dit PDF-dokument kan du bruge react-pdf'er StyleSheet komponent. Det StyleSheet komponent giver dig mulighed for at definere brugerdefinerede stilarter til dit PDF-dokument.

For at bruge Stilark komponent, importer den fra react-pdf-biblioteket og definer dine stilarter til PDF-dokumentet.

For eksempel:

importere Reagere fra'reagere';
importere { Dokument, tekst, side, typografiark } fra'@react-pdf/renderer';
konst styles = StyleSheet.create({
 side: {
 tekstjustering: 'centrum',
 marginTop: 30,
 skriftstørrelse: 30,
 },
 tekst: {
 farve: '#228b22',
 }
});


konst Mit Dokument = () => (


Hej med dig</Text>
 </Page>
 </Document>
);
eksportStandard Mit Dokument;

I kodeblokken ovenfor tilføjer du typografier til din PDF-komponent. Du definerer stilene ved hjælp af Stylesheet.create fungere. Det Stylesheet.create funktion opretter et stylesheet-objekt, der indeholder side og tekst stilarter.

Bruger stil prop, du passerer side og tekst stilarter til din Side og Tekst komponenter. Dette sikrer, at dine stilarter gælder for Side og Tekst komponenter.

Tilføjelse af layout til PDF-dokumentet

For at tilføje layout til dit PDF-dokument, bruger du Udsigt komponent. Det Udsigt komponent er en beholderkomponent leveret af react-pdf-biblioteket.

Det Udsigt komponent fungerer som en HTML div—et grundlæggende HTML-element. Med den pakker du andre komponenter ind, som f.eks Tekst komponent, og definer dine layouts ved at tilføje stilarter til Udsigt komponent.

Ligesom:

importere Reagere fra'reagere';
importere { Dokument, Tekst, Side, StyleSheet, Vis } fra'@react-pdf/renderer';
konst styles = StyleSheet.create({
 side: {
 marginTop: 30,
 skriftstørrelse: 30,
 polstring: 20,
 },
 layout: {
 marginTop: 30,
 flexDirection: 'række',
 justifyContent: 'mellemrum'
 }
});


konst Mit Dokument = () => (




Hej med dig</Text>
 </View>

Velkommen!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
eksportStandard Mit Dokument;

I dette eksempel bruger du Udsigt komponenter for at gruppere andre komponenter.

Tilføjelse af billeder til PDF-dokumentet

Du kan også gengive billeder i PDF-dokumentet med Billede komponent leveret af react-pdf-biblioteket. Det Billede komponent giver dig mulighed for at vise billeder i forskellige formater såsom JPEG, PNG, SVG og mange flere.

Det Billede komponent tager en src prop, der angiver URL'en på billedet og en stil prop for at tilføje brugerdefinerede stilarter til dine billeder.

For eksempel:

importere Reagere fra'reagere';
importere { Dokument, Side, StyleSheet, View, Image } fra'@react-pdf/renderer';
konst styles = StyleSheet.create({
 side: {
 polstring: 20,
 alignItems: 'centrum',
 },
 billede: {
 bredde: 300,
 højde: 200,
 }
});


konst Mit Dokument = () => (



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

I dette eksempel opretter du et PDF-dokument med en enkelt side, der indeholder et billede. Det Billede komponent viser et billede med en breddestil på 300 pixels og en højde på 200 pixels.

Du vil sandsynligvis inkludere links i dit PDF-dokument. Links leder brugeren til en udpeget URL, som kan tilbyde supplerende oplysninger, der ikke er tilgængelige i PDF-dokumentet. Det Link komponent af react-pdf-biblioteket giver dig mulighed for at oprette links i dine PDF-dokumenter.

Link-komponenten tager en src prop for at omdirigere brugere, når de klikker på linket. De vil blive omdirigeret til den URL, der er angivet i komponentens src prop, hvis du definerer en.

For at bruge Link komponent, skal du først importere den fra react-pdf-biblioteket. Du kan derefter tilføje det til dit PDF-dokument på denne måde:

importere Reagere fra'reagere';
importere { Dokument, Side, StyleSheet, View, Link } fra'@react-pdf/renderer';
konst styles = StyleSheet.create({
 side: {
 polstring: 20,
 alignItems: 'centrum',
 },
 link: {
 farve: '#333333',
 tekstDekoration: 'ingen'
 }
});


konst Mit Dokument = () => (



' https://example.com' style={styles.link}>Klik på mig</Link>
 </View>
 </Page>
 </Document>
);
eksportStandard Mit Dokument;

Ovenstående eksempel opretter et PDF-dokument med én side og én visning. I visningen viser du en Link-komponent, som, når den klikkes, omdirigerer brugeren til den angivne URL, " https://example.com.”

Nu kan du oprette PDF-dokumenter ved hjælp af React

React-pdf er et kraftfuldt bibliotek, der lader dig generere PDF-dokumenter fra dine React-komponenter. Du kan oprette PDF-filer ved hjælp af react-pdf og derefter tilføje tekst, billeder og links til dem.

Ved at bruge dette bibliotek kan du nemt generere professionelt udseende PDF-filer med tilpasset stil og layout.