Jak tworzyć dokumenty PDF za pomocą komponentów React za pomocą React-pdf

React to popularna biblioteka JavaScript do budowania interfejsów użytkownika. Możliwe jest tworzenie plików PDF z komponentów React przy użyciu biblioteki react-pdf.

Tutaj dowiesz się, jak tworzyć dokumenty PDF z komponentami React za pomocą React-pdf.

Co to jest React-pdf?

React-pdf to biblioteka, która umożliwia tworzenie dokumenty PDF z komponentów React. Zapewnia zestaw komponentów, których można użyć do zbudowania dokumentu PDF i używa wirtualnego modelu DOM do renderowania komponentów do formatu PDF.

Instalowanie React-pdf

Aby zainstalować react-pdf za pomocą menedżera pakietów node, uruchom następującą komendę terminala w katalogu swojego projektu:

npm install @react-pdf/renderer --save

Aby zamiast tego zainstalować go za pomocą menedżera pakietów przędzy, uruchom to polecenie:

przędza dodaj @react-pdf/renderer

Tworzenie dokumentu PDF

Aby utworzyć dokument PDF, użyjesz komponentów Document, Page i Text React-pdf. The

Dokument odpowiada za tworzenie nowego dokumentu PDF i renderowanie jego zawartości. The Strona komponent tworzy nową stronę w dokumencie PDF i renderuje jej zawartość. Wreszcie, Tekst komponent renderuje teksty w dokumencie PDF.

Oto przykład, w jaki sposób można utworzyć dokument PDF przy użyciu wszystkich trzech składników:

import Reagować z'reagować';
import { Dokument, tekst, strona } z'@react-pdf/renderer';
konst Mój dokument = () => (


Witam </Text>
 </Page>
 </Document>
);
eksportdomyślny Mój dokument;

W tym przykładzie tworzysz dokument PDF z pojedynczą stroną zawierającą pojedynczy wiersz tekstu „Cześć”. Po utworzeniu dokumentu PDF musisz go wyrenderować w aplikacji React.

Aby renderować dokument PDF w swojej aplikacji, użyj PDFViewer komponent, który generuje dokument PDF.

Importuj PDFViewer komponent i zawiń w niego swój dokument:

import Reagować z"reagować"
import { Przeglądarka plików PDF } z'@react-pdf/renderer';
import Mój dokument z"./Mój dokument";
funkcjonowaćAplikacja() {
powrót (


 </PDFViewer>
 )
}
eksportdomyślny Aplikacja

Po wyrenderowaniu aplikacji będzie wyglądać mniej więcej tak:

Dodawanie stylów do dokumentu PDF

Aby dodać style do dokumentu PDF, możesz użyć React-pdf Arkusz stylów część. The Arkusz stylów komponent umożliwia definiowanie niestandardowych stylów dla dokumentu PDF.

Aby użyć Arkusz stylów komponentu, zaimportuj go z biblioteki React-pdf i zdefiniuj style dla dokumentu PDF.

Na przykład:

import Reagować z'reagować';
import { Dokument, tekst, strona, arkusz stylów } z'@react-pdf/renderer';
konst style = StyleSheet.create({
 strona: {
 wyrównanie tekstu: 'Centrum',
 marginesGórny: 30,
 rozmiar czcionki: 30,
 },
 tekst: {
 kolor: „#228b22”,
 }
});
konst Mój dokument = () => (


Witam </Text>
 </Page>
 </Document>
);
eksportdomyślny Mój dokument;

W powyższym bloku kodu dodajesz style do komponentu PDF. Definiujesz style za pomocą Arkusz stylów.utwórz funkcjonować. The Arkusz stylów.utwórz Funkcja tworzy obiekt arkusza stylów zawierający plik strona I tekst style.

Używając styl prop, zdajesz strona I tekst style do twojego Strona I Tekst składniki. Gwarantuje to, że Twoje style mają zastosowanie do Strona I Tekst składniki.

Dodawanie układów do dokumentu PDF

Aby dodać układy do dokumentu PDF, użyj Pogląd część. The Pogląd komponent jest komponentem kontenera dostarczanym przez bibliotekę react-pdf.

The Pogląd komponent działa jak HTML dz—podstawowy element HTML. Za jego pomocą owijasz inne komponenty, takie jak Tekst komponent i zdefiniuj układy, dodając style do pliku Pogląd część.

jak tak:

import Reagować z'reagować';
import { Dokument, tekst, strona, arkusz stylów, widok } z'@react-pdf/renderer';
konst style = StyleSheet.create({
 strona: {
 marginesGórny: 30,
 rozmiar czcionki: 30,
 wyściółka: 20,
 },
 układ: {
 marginesGórny: 30,
 flexKierunek: 'wiersz',
 uzasadnij Treść: 'przestrzeń pomiędzy'
 }
});
konst Mój dokument = () => (




Witam </Text>
 </View>

Witamy!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
eksportdomyślny Mój dokument;

W tym przykładzie używasz Pogląd komponenty, aby pogrupować inne komponenty.

Dodawanie obrazów do dokumentu PDF

Możesz także renderować obrazy w dokumencie PDF za pomocą Obraz komponent dostarczony przez bibliotekę react-pdf. The Obraz komponent umożliwia wyświetlanie obrazów w różnych formatach, takich jak JPEG, PNG, SVG i wiele innych.

The Obraz składnik zajmuje a źródło prop, który określa adres URL obrazu i a styl prop, aby dodać niestandardowe style do swoich obrazów.

Na przykład:

import Reagować z'reagować';
import { Dokument, strona, arkusz stylów, widok, obraz } z'@react-pdf/renderer';
konst style = StyleSheet.create({
 strona: {
 wyściółka: 20,
 elementy wyrównania: 'Centrum',
 },
 obraz: {
 szerokość: 300,
 wysokość: 200,
 }
});
konst Mój dokument = () => (



 źródło=' https://example.com/image.png'
 styl={style.obraz} />
 </View>
 </Page>
 </Document>
);
eksportdomyślny Mój dokument;

W tym przykładzie tworzysz dokument PDF z pojedynczą stroną zawierającą obraz. The Obraz komponent wyświetla obraz ze stylem szerokości 300 pikseli i stylem wysokości 200 pikseli.

Prawdopodobnie będziesz chciał dołączyć łącza do swojego dokumentu PDF. Łącza kierują użytkownika do wskazanego adresu URL, który może zawierać dodatkowe informacje niedostępne w dokumencie PDF. The Połączyć komponent biblioteki React-pdf umożliwia tworzenie linków w dokumentach PDF.

Komponent Link zajmuje źródło prop, aby przekierowywać użytkowników po kliknięciu łącza. Zostaną przekierowani na adres URL określony w komponencie źródło prop, jeśli go zdefiniujesz.

Aby użyć Połączyć komponentu, musisz najpierw zaimportować go z biblioteki react-pdf. Następnie możesz dodać go do dokumentu PDF w następujący sposób:

import Reagować z'reagować';
import { Dokument, strona, arkusz stylów, widok, łącze } z'@react-pdf/renderer';
konst style = StyleSheet.create({
 strona: {
 wyściółka: 20,
 elementy wyrównania: 'Centrum',
 },
 link: {
 kolor: '#333333',
 tekstDekoracja: 'nic'
 }
});
konst Mój dokument = () => (



' https://example.com' style={styles.link}>Kliknij mnie</Link>
 </View>
 </Page>
 </Document>
);
eksportdomyślny Mój dokument;

Powyższy przykład tworzy dokument PDF z jedną stroną i jednym widokiem. W widoku wyświetlany jest komponent Link, który po kliknięciu przekierowuje użytkownika do określonego adresu URL, „ https://example.com.”

Teraz możesz tworzyć dokumenty PDF za pomocą React

React-pdf to potężna biblioteka, która pozwala generować dokumenty PDF z komponentów React. Możesz tworzyć pliki PDF za pomocą React-pdf, a następnie dodawać do nich tekst, obrazy i linki.

Korzystając z tej biblioteki, możesz łatwo generować profesjonalnie wyglądające pliki PDF z niestandardowymi stylami i układem.