Cum să creați documente PDF cu componentele dvs. React folosind React-pdf

React este o bibliotecă JavaScript populară pentru construirea de interfețe cu utilizatorul. Este posibil să creați fișiere PDF din componentele React folosind biblioteca react-pdf.

Aici veți învăța cum să creați documente PDF cu componentele React folosind react-pdf.

Ce este React-pdf?

React-pdf este o bibliotecă care vă permite să creați Documente PDF din componentele React. Acesta oferă un set de componente pe care le puteți utiliza pentru a vă construi documentul PDF și folosește un DOM virtual pentru a reda componentele în PDF.

Instalarea React-pdf

Pentru a instala react-pdf folosind managerul de pachete nod, rulați următoarea comandă de terminal în directorul proiectului dvs.:

npm install @react-pdf/renderer --save

Pentru a-l instala cu managerul de pachete yarn, rulați această comandă:

yarn add @react-pdf/renderer

Crearea unui document PDF

Pentru a crea un document PDF, veți folosi componentele Document, Pagina și Text ale react-pdf. The

Document componenta este responsabilă pentru crearea unui nou document PDF și redarea conținutului acestuia. The Pagină componenta creează o pagină nouă în documentul PDF și redă conținutul acesteia. În cele din urmă, cel Text componenta redă texte în documentul PDF.

Iată un exemplu despre cum puteți crea un document PDF utilizând toate aceste trei componente:

import Reacţiona din'reacţiona';
import { Document, Text, Page } din„@react-pdf/renderer”;
const MyDocument = () => (


Buna ziua</Text>
 </Page>
 </Document>
);
exportMod implicit MyDocument;

În acest exemplu, creați un document PDF cu o singură pagină care conține o singură linie de text, „Bună ziua.” După crearea unui document PDF, trebuie să îl redați în aplicația React.

Pentru a reda documentul PDF în aplicația dvs., utilizați PDFViewer componentă, care generează documentul PDF.

Importă PDFViewer componentă și împachetați documentul în ea:

import Reacţiona din"reacţiona"
import { PDFViewer } din„@react-pdf/renderer”;
import MyDocument din„./Documentul meu”;
funcţieApp() {
întoarcere (


 </PDFViewer>
 )
}
exportMod implicit App

La randarea aplicației, va arăta cam așa:

Adăugarea de stiluri la documentul PDF

Pentru a adăuga stiluri documentului PDF, puteți utiliza react-pdf Foaia de stil componentă. The Foaia de stil componenta vă permite să definiți stiluri personalizate pentru documentul PDF.

Pentru a utiliza Foaia de stil componentă, importați-o din biblioteca react-pdf și definiți-vă stilurile pentru documentul PDF.

De exemplu:

import Reacţiona din'reacţiona';
import { Document, Text, Pagina, Foaie de stil } din„@react-pdf/renderer”;
const stiluri = StyleSheet.create({
 pagina: {
 aliniere text: 'centru',
 marginTop: 30,
 marimea fontului: 30,
 },
 text: {
 culoare: „#228b22”,
 }
});
const MyDocument = () => (


Buna ziua</Text>
 </Page>
 </Document>
);
exportMod implicit MyDocument;

În blocul de cod de mai sus, adăugați stiluri la componenta PDF. Definiți stilurile folosind Foaia de stil.create funcţie. The Foaia de stil.create funcția creează un obiect foaie de stil care conține pagină și text stiluri.

Folosind stil prop, treci pagină și text stiluri pentru dvs Pagină și Text componente. Acest lucru vă asigură că stilurile dvs. se aplică Pagină și Text componente.

Adăugarea de aspecte la documentul PDF

Pentru a adăuga machete documentului PDF, utilizați Vedere componentă. The Vedere componenta este o componentă container furnizată de biblioteca react-pdf.

The Vedere componenta acționează ca un HTML div—un element HTML fundamental. Cu el, împachetați alte componente, cum ar fi Text componentă și definiți-vă machetele adăugând stiluri la Vedere componentă.

Ca astfel:

import Reacţiona din'reacţiona';
import { Document, Text, Pagina, Foaie de stil, Vizualizare } din„@react-pdf/renderer”;
const stiluri = StyleSheet.create({
 pagina: {
 marginTop: 30,
 marimea fontului: 30,
 umplutura: 20,
 },
 aspect: {
 marginTop: 30,
 flexDirection: 'rând',
 justifyContent: „spațiu între”
 }
});
const MyDocument = () => (




Buna ziua</Text>
 </View>

Bun venit!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
exportMod implicit MyDocument;

În acest exemplu, utilizați Vedere componente pentru a grupa alte componente.

Adăugarea de imagini în documentul PDF

De asemenea, puteți reda imagini în documentul PDF cu ajutorul Imagine componentă furnizată de biblioteca react-pdf. The Imagine componenta vă permite să afișați imagini în diferite formate, cum ar fi JPEG, PNG, SVG și multe altele.

The Imagine componenta ia a src prop care specifică adresa URL a imaginii și a stil prop pentru a adăuga stiluri personalizate imaginilor tale.

De exemplu:

import Reacţiona din'reacţiona';
import { Document, pagină, foaie de stil, vizualizare, imagine } din„@react-pdf/renderer”;
const stiluri = StyleSheet.create({
 pagina: {
 umplutura: 20,
 alignItems: 'centru',
 },
 imagine: {
 lăţime: 300,
 înălţime: 200,
 }
});
const MyDocument = () => (



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

În acest exemplu, creați un document PDF cu o singură pagină care conține o imagine. The Imagine componenta afișează o imagine cu un stil de lățime de 300 de pixeli și un stil de înălțime de 200 de pixeli.

Probabil că veți dori să includeți linkuri în documentul PDF. Legăturile direcționează utilizatorul către o adresă URL desemnată, care poate oferi informații suplimentare care nu sunt disponibile în documentul PDF. The Legătură componenta bibliotecii react-pdf vă permite să creați legături în documentele dumneavoastră PDF.

Componenta Link necesită a src prop pentru a redirecționa utilizatorii atunci când fac clic pe link. Acestea vor fi redirecționate către adresa URL specificată în componenta src prop dacă definiți unul.

Pentru a utiliza Legătură componentă, mai întâi trebuie să o importați din biblioteca react-pdf. Apoi îl puteți adăuga în documentul PDF astfel:

import Reacţiona din'reacţiona';
import { Document, pagină, foaie de stil, vizualizare, link } din„@react-pdf/renderer”;
const stiluri = StyleSheet.create({
 pagina: {
 umplutura: 20,
 alignItems: 'centru',
 },
 link: {
 culoare: '#333333',
 textDecor: 'nici unul'
 }
});
const MyDocument = () => (



' https://example.com' style={styles.link}>Clic pe mine</Link>
 </View>
 </Page>
 </Document>
);
exportMod implicit MyDocument;

Exemplul de mai sus creează un document PDF cu o pagină și o vizualizare. În vizualizare, afișați o componentă Link care, atunci când faceți clic, redirecționează utilizatorul către adresa URL specificată, „ https://example.com.”

Acum puteți crea documente PDF folosind React

React-pdf este o bibliotecă puternică care vă permite să generați documente PDF din componentele dvs. React. Puteți crea fișiere PDF utilizând react-pdf, apoi puteți adăuga text, imagini și link-uri către ele.

Folosind această bibliotecă, puteți genera cu ușurință fișiere PDF cu aspect profesional, cu stil și aspect personalizat.