Erstellen Sie ganz einfach PDFs mit dieser React-Bibliothek und einfachem Code.

React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es ist möglich, PDF-Dateien aus React-Komponenten mit der React-PDF-Bibliothek zu erstellen.

Hier erfahren Sie, wie Sie mit React-PDF PDF-Dokumente mit React-Komponenten erstellen.

Was ist React-pdf?

React-pdf ist eine Bibliothek, mit der Sie erstellen können PDF-Dokumente von React-Komponenten. Es bietet eine Reihe von Komponenten, die Sie zum Erstellen Ihres PDF-Dokuments verwenden können, und verwendet ein virtuelles DOM, um die Komponenten in PDF zu rendern.

React-pdf installieren

Führen Sie den folgenden Terminalbefehl im Verzeichnis Ihres Projekts aus, um „react-pdf“ mithilfe des Node-Paketmanagers zu installieren:

npm install @react-pdf/renderer --save

Um es stattdessen mit dem Garnpaket-Manager zu installieren, führen Sie diesen Befehl aus:

Garn füge @react-pdf/renderer hinzu

Erstellen eines PDF-Dokuments

Um ein PDF-Dokument zu erstellen, verwenden Sie die Document-, Page- und Text-Komponenten von respond-pdf. Der

instagram viewer
Dokumentieren Die Komponente ist für das Erstellen eines neuen PDF-Dokuments und das Rendern seines Inhalts verantwortlich. Der Buchseite Komponente erstellt eine neue Seite innerhalb des PDF-Dokuments und rendert deren Inhalt. Endlich, das Text Komponente rendert Texte innerhalb des PDF-Dokuments.

Hier ist ein Beispiel dafür, wie Sie ein PDF-Dokument mit allen drei Komponenten erstellen können:

importieren Reagieren aus'reagieren';
importieren { Dokument, Text, Seite } aus'@react-pdf/renderer';
konst MeinDokument = () => (


Hallo zusammen</Text>
 </Page>
 </Document>
);
ExportStandard Mein Dokument;

In diesem Beispiel erstellen Sie ein PDF-Dokument mit einer einzelnen Seite, die eine einzelne Textzeile „Hallo“ enthält. Nachdem Sie ein PDF-Dokument erstellt haben, müssen Sie es in Ihrer React-Anwendung rendern.

Verwenden Sie zum Rendern des PDF-Dokuments in Ihrer Anwendung die PDFViewer Komponente, die das PDF-Dokument generiert.

Importieren Sie die PDFViewer Komponente und packen Sie Ihr Dokument darin ein:

importieren Reagieren aus"reagieren"
importieren { PDFViewer } aus'@react-pdf/renderer';
importieren Mein Dokument aus"./Mein Dokument";
FunktionApp() {
zurückkehren (


 </PDFViewer>
 )
}
ExportStandard App

Nach dem Rendern Ihrer Anwendung sieht sie in etwa so aus:

Hinzufügen von Stilen zum PDF-Dokument

Um Stile zu Ihrem PDF-Dokument hinzuzufügen, können Sie React-PDFs verwenden Stylesheet Komponente. Der Stylesheet Mit der Komponente können Sie benutzerdefinierte Stile für Ihr PDF-Dokument definieren.

Um die zu verwenden Stylesheet Komponente, importieren Sie sie aus der React-PDF-Bibliothek und definieren Sie Ihre Stile für das PDF-Dokument.

Zum Beispiel:

importieren Reagieren aus'reagieren';
importieren { Dokument, Text, Seite, Stylesheet } aus'@react-pdf/renderer';
konst Stile = StyleSheet.create({
 Buchseite: {
 Textausrichtung: 'Center',
 RandOben: 30,
 Schriftgröße: 30,
 },
 Text: {
 Farbe: '#228b22',
 }
});


konst MeinDokument = () => (


Hallo zusammen</Text>
 </Page>
 </Document>
);
ExportStandard Mein Dokument;

Im obigen Codeblock fügen Sie Stile zu Ihrer PDF-Komponente hinzu. Die Stile definieren Sie über die Stylesheet.erstellen Funktion. Der Stylesheet.erstellen -Funktion erstellt ein Stylesheet-Objekt, das die enthält Buchseite Und Text Stile.

Verwendung der Stil prop, du übergibst die Buchseite Und Text Stile zu Ihren Buchseite Und Text Komponenten. Dadurch wird sichergestellt, dass Ihre Stile für die gelten Buchseite Und Text Komponenten.

Hinzufügen von Layouts zum PDF-Dokument

Um Ihrem PDF-Dokument Layouts hinzuzufügen, verwenden Sie die Sicht Komponente. Der Sicht Die Komponente ist eine Containerkomponente, die von der React-PDF-Bibliothek bereitgestellt wird.

Der Sicht Komponente verhält sich wie ein HTML div—ein grundlegendes HTML-Element. Damit packen Sie andere Komponenten ein, wie z Text -Komponente und definieren Sie Ihre Layouts, indem Sie Stile zu der hinzufügen Sicht Komponente.

So:

importieren Reagieren aus'reagieren';
importieren { Dokument, Text, Seite, Stylesheet, Ansicht } aus'@react-pdf/renderer';
konst Stile = StyleSheet.create({
 Buchseite: {
 RandOben: 30,
 Schriftgröße: 30,
 Polsterung: 20,
 },
 Layout: {
 RandOben: 30,
 flexRichtung: 'Reihe',
 begründenInhalt: 'Zwischenraum'
 }
});


konst MeinDokument = () => (




Hallo zusammen</Text>
 </View>

Willkommen!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
ExportStandard Mein Dokument;

In diesem Beispiel verwenden Sie die Sicht Komponenten, um andere Komponenten zu gruppieren.

Hinzufügen von Bildern zum PDF-Dokument

Sie können auch Bilder im PDF-Dokument mit rendern Bild Komponente, die von der React-PDF-Bibliothek bereitgestellt wird. Der Bild Mit der Komponente können Sie Bilder in verschiedenen Formaten wie JPEG, PNG, SVG und vielen mehr anzeigen.

Der Bild Komponente dauert a Quelle prop, das die URL des Bildes angibt und a Stil prop, um Ihren Bildern benutzerdefinierte Stile hinzuzufügen.

Zum Beispiel:

importieren Reagieren aus'reagieren';
importieren { Dokument, Seite, Stylesheet, Ansicht, Bild } aus'@react-pdf/renderer';
konst Stile = StyleSheet.create({
 Buchseite: {
 Polsterung: 20,
 ausrichtenItems: 'Center',
 },
 Bild: {
 Breite: 300,
 Höhe: 200,
 }
});


konst MeinDokument = () => (



 Quelle=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
ExportStandard Mein Dokument;

In diesem Beispiel erstellen Sie ein PDF-Dokument mit einer einzelnen Seite, die ein Bild enthält. Der Bild -Komponente zeigt ein Bild mit einem Breitenstil von 300 Pixel und einem Höhenstil von 200 Pixel an.

Wahrscheinlich möchten Sie Links in Ihr PDF-Dokument einfügen. Links leiten den Benutzer zu einer bestimmten URL, die möglicherweise zusätzliche Informationen bietet, die im PDF-Dokument nicht verfügbar sind. Der Verknüpfung Komponente der React-PDF-Bibliothek ermöglicht es Ihnen, Links innerhalb Ihrer PDF-Dokumente zu erstellen.

Die Link-Komponente nimmt a Quelle prop, um Benutzer umzuleiten, wenn sie auf den Link klicken. Sie werden zu der in der Komponente angegebenen URL umgeleitet Quelle prop, wenn Sie eine definieren.

Um die zu verwenden Verknüpfung Komponente, müssen Sie sie zuerst aus der React-PDF-Bibliothek importieren. Sie können es dann wie folgt zu Ihrem PDF-Dokument hinzufügen:

importieren Reagieren aus'reagieren';
importieren { Dokument, Seite, Stylesheet, Ansicht, Link } aus'@react-pdf/renderer';
konst Stile = StyleSheet.create({
 Buchseite: {
 Polsterung: 20,
 ausrichtenItems: 'Center',
 },
 Verknüpfung: {
 Farbe: '#333333',
 textDekoration: 'keiner'
 }
});


konst MeinDokument = () => (



' https://example.com' style={styles.link}>Klick mich</Link>
 </View>
 </Page>
 </Document>
);
ExportStandard Mein Dokument;

Das obige Beispiel erstellt ein PDF-Dokument mit einer Seite und einer Ansicht. Innerhalb der Ansicht zeigen Sie eine Link-Komponente an, die, wenn sie angeklickt wird, den Benutzer zur angegebenen URL weiterleitet, „ https://example.com.”

Jetzt können Sie mit React PDF-Dokumente erstellen

React-pdf ist eine leistungsstarke Bibliothek, mit der Sie PDF-Dokumente aus Ihren React-Komponenten generieren können. Sie können PDF-Dateien mit React-PDF erstellen und ihnen dann Text, Bilder und Links hinzufügen.

Mithilfe dieser Bibliothek können Sie ganz einfach professionell aussehende PDF-Dateien mit benutzerdefiniertem Stil und Layout erstellen.