Come creare documenti PDF con i tuoi componenti React utilizzando React-pdf

React è una popolare libreria JavaScript per la creazione di interfacce utente. È possibile creare file PDF dai componenti React utilizzando la libreria react-pdf.

Qui imparerai come creare documenti PDF con componenti React usando react-pdf.

Cos'è React-pdf?

React-pdf è una libreria che ti permette di creare Documenti PDF dai componenti React. Fornisce una serie di componenti che puoi utilizzare per creare il tuo documento PDF e utilizza un DOM virtuale per eseguire il rendering dei componenti in PDF.

Installazione di React-pdf

Per installare react-pdf utilizzando il gestore pacchetti del nodo, esegui il seguente comando da terminale nella directory del tuo progetto:

npm install @react-pdf/renderer --save

Per installarlo invece con il gestore di pacchetti di filati, esegui questo comando:

filato add @react-pdf/renderer

Creazione di un documento PDF

Per creare un documento PDF, utilizzerai i componenti Documento, Pagina e Testo di react-pdf. IL

Documento componente è responsabile della creazione di un nuovo documento PDF e del rendering del suo contenuto. IL Pagina componente crea una nuova pagina all'interno del documento PDF e ne esegue il rendering del contenuto. Infine il Testo componente esegue il rendering dei testi all'interno del documento PDF.

Ecco un esempio di come creare un documento PDF utilizzando tutti e tre questi componenti:

importare Reagire da'reagire';
importare { Documento, Testo, Pagina } da'@react-pdf/renderer';
cost Il mio documento = () => (


Ciao a tutti</Text>
 </Page>
 </Document>
);
esportarepredefinito Il mio documento;

In questo esempio, crei un documento PDF con una singola pagina contenente una singola riga di testo, "Hello There". Dopo aver creato un documento PDF, devi eseguirne il rendering nella tua applicazione React.

Per eseguire il rendering del documento PDF nella tua applicazione, utilizza il file Visualizzatore PDF componente, che genera il documento PDF.

Importa il Visualizzatore PDF componente e avvolgere il documento in esso:

importare Reagire da"reagire"
importare { Visualizzatore PDF } da'@react-pdf/renderer';
importare Il mio documento da"./Il mio documento";
funzioneApp() {
ritorno (


 </PDFViewer>
 )
}
esportarepredefinito App

Al momento del rendering della tua applicazione, sarà simile a questa:

Aggiunta di stili al documento PDF

Per aggiungere stili al tuo documento PDF, puoi utilizzare react-pdf Foglio di stile componente. IL Foglio di stile componente consente di definire stili personalizzati per il documento PDF.

Per usare il Foglio di stile componente, importalo dalla libreria react-pdf e definisci i tuoi stili per il documento PDF.

Per esempio:

importare Reagire da'reagire';
importare { Documento, testo, pagina, foglio di stile } da'@react-pdf/renderer';
cost styles = StyleSheet.create({
 pagina: {
 textAlign: 'centro',
 margineTop: 30,
 dimensione del font: 30,
 },
 testo: {
 colore: '#228b22',
 }
});
cost Il mio documento = () => (


Ciao a tutti</Text>
 </Page>
 </Document>
);
esportarepredefinito Il mio documento;

Nel blocco di codice sopra, stai aggiungendo stili al tuo componente PDF. Definisci gli stili usando il file Foglio di stile.create funzione. IL Foglio di stile.create La funzione crea un oggetto foglio di stile contenente il file pagina E testo stili.

Usando il stile prop, tu passi il pagina E testo stili al tuo Pagina E Testo componenti. Ciò garantisce che i tuoi stili si applichino al file Pagina E Testo componenti.

Aggiunta di layout al documento PDF

Per aggiungere layout al tuo documento PDF, usa il file Visualizzazione componente. IL Visualizzazione component è un componente contenitore fornito dalla libreria react-pdf.

IL Visualizzazione componente si comporta come un HTML div—un elemento HTML fondamentale. Con esso, avvolgi altri componenti, come il Testo componente e definire i layout aggiungendo stili al file Visualizzazione componente.

Così:

importare Reagire da'reagire';
importare { Documento, Testo, Pagina, Foglio di stile, Visualizza } da'@react-pdf/renderer';
cost styles = StyleSheet.create({
 pagina: {
 margineTop: 30,
 dimensione del font: 30,
 imbottitura: 20,
 },
 disposizione: {
 margineTop: 30,
 direzione flessibile: 'riga',
 giustificaContenuto: 'spazio tra'
 }
});
cost Il mio documento = () => (




Ciao a tutti</Text>
 </View>

Benvenuto!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
esportarepredefinito Il mio documento;

In questo esempio, si utilizza il Visualizzazione componenti per raggruppare altri componenti.

Aggiunta di immagini al documento PDF

È inoltre possibile eseguire il rendering delle immagini nel documento PDF con l'estensione Immagine componente fornito dalla libreria react-pdf. IL Immagine componente consente di visualizzare immagini in vari formati come JPEG, PNG, SVG e molti altri.

IL Immagine componente prende a src prop che specifica l'URL dell'immagine e a stile prop per aggiungere stili personalizzati alle tue immagini.

Per esempio:

importare Reagire da'reagire';
importare { Documento, Pagina, Foglio di stile, Vista, Immagine } da'@react-pdf/renderer';
cost styles = StyleSheet.create({
 pagina: {
 imbottitura: 20,
 alignItems: 'centro',
 },
 Immagine: {
 larghezza: 300,
 altezza: 200,
 }
});
cost Il mio documento = () => (



 sorgente=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
esportarepredefinito Il mio documento;

In questo esempio, stai creando un documento PDF con una singola pagina che contiene un'immagine. IL Immagine componente visualizza un'immagine con uno stile di larghezza di 300 pixel e uno stile di altezza di 200 pixel.

Probabilmente vorrai includere collegamenti nel tuo documento PDF. I collegamenti indirizzano l'utente a un URL designato, che può offrire informazioni supplementari non disponibili nel documento PDF. IL Collegamento componente della libreria react-pdf ti consente di creare collegamenti all'interno dei tuoi documenti PDF.

Il componente Link prende a src prop per reindirizzare gli utenti quando fanno clic sul collegamento. Verranno reindirizzati all'URL specificato nei file del componente src prop se ne definisci uno.

Per usare il Collegamento component, devi prima importarlo dalla libreria react-pdf. Puoi quindi aggiungerlo al tuo documento PDF in questo modo:

importare Reagire da'reagire';
importare { Documento, Pagina, Foglio di stile, Visualizza, Link } da'@react-pdf/renderer';
cost styles = StyleSheet.create({
 pagina: {
 imbottitura: 20,
 alignItems: 'centro',
 },
 collegamento: {
 colore: '#333333',
 testoDecorazione: 'nessuno'
 }
});
cost Il mio documento = () => (



' https://example.com' style={styles.link}>Cliccami</Link>
 </View>
 </Page>
 </Document>
);
esportarepredefinito Il mio documento;

L'esempio precedente crea un documento PDF con una pagina e una vista. All'interno della vista, stai visualizzando un componente Link che, se cliccato, reindirizza l'utente all'URL specificato, " https://example.com.”

Ora puoi creare documenti PDF usando React

React-pdf è una potente libreria che ti consente di generare documenti PDF dai tuoi componenti React. Puoi creare file PDF utilizzando react-pdf, quindi aggiungere testo, immagini e collegamenti.

Utilizzando questa libreria, puoi generare facilmente file PDF dall'aspetto professionale con stile e layout personalizzati.