Hogyan készítsünk PDF dokumentumokat a React komponensekkel a React-pdf segítségével

A React egy népszerű JavaScript-könyvtár a felhasználói felületek építésére. Lehetőség van PDF-fájlok létrehozására a React összetevőkből a react-pdf könyvtár használatával.

Itt megtudhatja, hogyan hozhat létre PDF dokumentumokat React összetevőkkel a react-pdf használatával.

Mi az a React-pdf?

A React-pdf egy olyan könyvtár, amely lehetővé teszi a létrehozást PDF dokumentumok a React komponensekből. Olyan összetevőket biztosít, amelyek segítségével összeállíthatja PDF-dokumentumát, és virtuális DOM-ot használ az összetevők PDF-formátumba való leképezéséhez.

React-pdf telepítése

A react-pdf telepítéséhez a csomóponti csomagkezelő használatával futtassa a következő terminálparancsot a projekt könyvtárában:

npm telepítés @react-pdf/renderer --save

Ha inkább a yarn csomagkezelővel szeretné telepíteni, futtassa ezt a parancsot:

fonal hozzáadása @react-pdf/renderer

PDF dokumentum létrehozása

PDF dokumentum létrehozásához használja a react-pdf Dokumentum, Oldal és Szöveg összetevőit. A

Dokumentum komponens felelős egy új PDF dokumentum létrehozásáért és tartalmának megjelenítéséért. A oldal összetevő új oldalt hoz létre a PDF dokumentumon belül, és megjeleníti annak tartalmát. Végül a Szöveg komponens a PDF dokumentumon belüli szövegeket jeleníti meg.

Íme egy példa arra, hogyan hozhat létre PDF-dokumentumot mindhárom összetevő felhasználásával:

import Reagál tól től'reagál';
import { Dokumentum, szöveg, oldal } tól től'@react-pdf/renderer';
const Saját dokumentum = () => (


Sziasztok</Text>
 </Page>
 </Document>
);
exportalapértelmezett MyDocument;

Ebben a példában PDF-dokumentumot hoz létre egyetlen oldallal, amely egyetlen sornyi szöveget tartalmaz: „Helló!” A PDF-dokumentum létrehozása után elő kell írnia azt a React alkalmazásban.

A PDF-dokumentum alkalmazásban való megjelenítéséhez használja a PDFViewer komponens, amely a PDF dokumentumot hozza létre.

Importálja a PDFViewer összetevőt, és csomagolja bele a dokumentumot:

import Reagál tól től"reagál"
import { PDFViewer } tól től'@react-pdf/renderer';
import MyDocument tól től"./MyDocument";
funkcióApp() {
Visszatérés (


 </PDFViewer>
 )
}
exportalapértelmezett App

Az alkalmazás renderelése után valahogy így fog kinézni:

Stílusok hozzáadása a PDF-dokumentumhoz

Ha stílusokat szeretne hozzáadni a PDF-dokumentumhoz, használhatja a react-pdf fájlokat StyleSheet összetevő. A StyleSheet komponens lehetővé teszi egyéni stílusok meghatározását a PDF-dokumentumhoz.

Használatához a Stíluslap összetevőt, importálja a react-pdf könyvtárból, és határozza meg a PDF-dokumentum stílusait.

Például:

import Reagál tól től'reagál';
import { Dokumentum, szöveg, oldal, stíluslap } tól től'@react-pdf/renderer';
const styles = StyleSheet.create({
 oldal: {
 szöveg igazítás: 'központ',
 marginTop: 30,
 betűméret: 30,
 },
 szöveg: {
 szín: "#228b22",
 }
});
const Saját dokumentum = () => (


Sziasztok</Text>
 </Page>
 </Document>
);
exportalapértelmezett MyDocument;

A fenti kódblokkban stílusokat ad hozzá a PDF-összetevőhöz. A stílusokat a segítségével határozhatja meg Stylesheet.create funkció. A Stylesheet.create függvény létrehoz egy stíluslap objektumot, amely tartalmazza a oldalon és szöveg stílusok.

Használni a stílus prop, akkor át a oldalon és szöveg stílusok az Ön számára oldal és Szöveg alkatrészek. Ez biztosítja, hogy a stílusok a oldal és Szöveg alkatrészek.

Elrendezések hozzáadása a PDF-dokumentumhoz

Ha elrendezéseket szeretne hozzáadni a PDF-dokumentumhoz, használja a Kilátás összetevő. A Kilátás komponens a react-pdf könyvtár által biztosított tárolókomponens.

A Kilátás komponens úgy működik, mint egy HTML div—alapvető HTML-elem. Ezzel más alkatrészeket is becsomagol, mint pl Szöveg összetevőt, és határozza meg az elrendezéseket stílusok hozzáadásával a Kilátás összetevő.

Például így:

import Reagál tól től'reagál';
import { Dokumentum, szöveg, oldal, stíluslap, nézet } tól től'@react-pdf/renderer';
const styles = StyleSheet.create({
 oldal: {
 marginTop: 30,
 betűméret: 30,
 párnázás: 20,
 },
 elrendezés: {
 marginTop: 30,
 flexDirection: 'sor',
 justifyContent: "közötti tér"
 }
});
const Saját dokumentum = () => (




Sziasztok</Text>
 </View>

Isten hozott!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
exportalapértelmezett MyDocument;

Ebben a példában a Kilátás komponensek csoportosításához.

Képek hozzáadása a PDF dokumentumhoz

A PDF dokumentumban lévő képeket is renderelheti a Kép a react-pdf könyvtár által biztosított összetevő. A Kép komponens lehetővé teszi a képek megjelenítését különböző formátumokban, például JPEG, PNG, SVG és még sok más formátumban.

A Kép komponens vesz a src prop, amely megadja a kép URL-jét, és a stílus kellék, hogy egyéni stílusokat adjon a képekhez.

Például:

import Reagál tól től'reagál';
import { Dokumentum, oldal, stíluslap, nézet, kép } tól től'@react-pdf/renderer';
const styles = StyleSheet.create({
 oldal: {
 párnázás: 20,
 alignItems: 'központ',
 },
 kép: {
 szélesség: 300,
 magasság: 200,
 }
});
const Saját dokumentum = () => (



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

Ebben a példában egy PDF-dokumentumot hoz létre egyetlen oldallal, amely képet tartalmaz. A Kép komponens 300 pixel szélességű és 200 pixel magasságú képet jelenít meg.

Valószínűleg linkeket szeretne beilleszteni a PDF-dokumentumba. A hivatkozások egy kijelölt URL-re irányítják a felhasználót, amely a PDF-dokumentumban nem elérhető kiegészítő információkat tartalmazhat. A Link A react-pdf könyvtár összetevője lehetővé teszi hivatkozások létrehozását a PDF dokumentumokon belül.

A Link komponens a src a felhasználók átirányításához, amikor a linkre kattintanak. A rendszer átirányítja őket az összetevőben megadott URL-re src prop ha definiál egyet.

Használatához a Link összetevőt, először importálnia kell a react-pdf könyvtárból. Ezt követően a következőképpen adhatja hozzá PDF-dokumentumához:

import Reagál tól től'reagál';
import { Dokumentum, oldal, stíluslap, nézet, hivatkozás } tól től'@react-pdf/renderer';
const styles = StyleSheet.create({
 oldal: {
 párnázás: 20,
 alignItems: 'központ',
 },
 link: {
 szín: '#333333',
 szövegDíszítés: 'egyik sem'
 }
});
const Saját dokumentum = () => (



' https://example.com' style={styles.link}>Kattintson rám</Link>
 </View>
 </Page>
 </Document>
);
exportalapértelmezett MyDocument;

A fenti példa egy oldalas és egy nézetű PDF-dokumentumot hoz létre. A nézeten belül egy Link összetevőt jelenít meg, amelyre kattintva a felhasználót a megadott URL-re irányítja át, " https://example.com.”

Mostantól PDF-dokumentumokat hozhat létre a React segítségével

A React-pdf egy hatékony könyvtár, amely lehetővé teszi PDF dokumentumok létrehozását a React összetevőiből. A react-pdf használatával PDF-fájlokat hozhat létre, majd szöveget, képeket és hivatkozásokat adhat hozzájuk.

A könyvtár használatával egyszerűen hozhat létre professzionális megjelenésű PDF-fájlokat egyedi stílussal és elrendezéssel.