Jak vytvářet dokumenty PDF pomocí komponent React pomocí React-pdf

React je oblíbená JavaScriptová knihovna pro vytváření uživatelských rozhraní. Je možné vytvářet soubory PDF z komponent React pomocí knihovny React-pdf.

Zde se dozvíte, jak vytvářet PDF dokumenty s komponentami React pomocí React-pdf.

Co je React-pdf?

React-pdf je knihovna, která vám umožňuje vytvářet PDF dokumenty od komponent React. Poskytuje sadu komponent, které můžete použít k vytvoření dokumentu PDF, a používá virtuální DOM k vykreslení komponent do PDF.

Instalace React-pdf

Chcete-li nainstalovat response-pdf pomocí správce balíčků uzlů, spusťte následující příkaz terminálu v adresáři vašeho projektu:

npm install @react-pdf/renderer --save

Chcete-li jej nainstalovat pomocí správce balíčků příze, spusťte tento příkaz:

příze přidat @react-pdf/renderer

Vytvoření dokumentu PDF

Chcete-li vytvořit dokument PDF, použijete komponenty Dokument, Stránka a Text od reakce-pdf. The Dokument komponenta je zodpovědná za vytvoření nového dokumentu PDF a vykreslení jeho obsahu. The

Strana komponenta vytvoří v dokumentu PDF novou stránku a vykreslí její obsah. Konečně, Text komponenta vykresluje texty v dokumentu PDF.

Zde je příklad toho, jak můžete vytvořit dokument PDF pomocí všech tří těchto komponent:

import Reagovat z'reagovat';
import { Dokument, Text, Stránka } z'@react-pdf/renderer';
konst Můj dokument = () => (


Dobrý den</Text>
 </Page>
 </Document>
);
vývoznívýchozí MůjDokument;

V tomto příkladu vytvoříte dokument PDF s jedinou stránkou obsahující jeden řádek textu „Ahoj“. Po vytvoření dokumentu PDF jej musíte vykreslit ve své aplikaci React.

Chcete-li vykreslit dokument PDF ve své aplikaci, použijte Prohlížeč PDF komponenta, která generuje dokument PDF.

Importujte Prohlížeč PDF komponentu a zabalte do ní svůj dokument:

import Reagovat z"reagovat"
import { PDF Viewer } z'@react-pdf/renderer';
import Můj dokument z"./MyDocument";
funkceAplikace() {
vrátit se (


 </PDFViewer>
 )
}
vývoznívýchozí Aplikace

Po vykreslení aplikace bude vypadat nějak takto:

Přidání stylů do dokumentu PDF

Chcete-li do dokumentu PDF přidat styly, můžete použít Reag-pdf's StyleSheet komponent. The StyleSheet komponenta umožňuje definovat vlastní styly pro váš dokument PDF.

Chcete-li použít Šablona stylů importujte jej z knihovny Reag-pdf a definujte své styly pro dokument PDF.

Například:

import Reagovat z'reagovat';
import { Dokument, Text, Stránka, Šablona stylů } z'@react-pdf/renderer';
konst styly = StyleSheet.create({
 stránka: {
 zarovnání textu: 'centrum',
 marginTop: 30,
 velikost písma: 30,
 },
 text: {
 barva: '#228b22',
 }
});
konst Můj dokument = () => (


Dobrý den</Text>
 </Page>
 </Document>
);
vývoznívýchozí MůjDokument;

V bloku kódu výše přidáváte styly do komponenty PDF. Styly definujete pomocí Stylesheet.create funkce. The Stylesheet.create funkce vytvoří objekt šablony stylů obsahující strana a text styly.

Za použití styl vrtule, předáte strana a text styly pro vaše Strana a Text komponenty. Tím zajistíte, že se vaše styly použijí na Strana a Text komponenty.

Přidání rozvržení do dokumentu PDF

Chcete-li přidat rozvržení do dokumentu PDF, použijte Pohled komponent. The Pohled komponenta je kontejnerová komponenta poskytovaná knihovnou Reag-pdf.

The Pohled komponenta funguje jako HTML div—základní prvek HTML. S ním zabalíte další komponenty, jako např Text a definujte rozvržení přidáním stylů do Pohled komponent.

Jako tak:

import Reagovat z'reagovat';
import { Document, Text, Page, Style Sheet, View } z'@react-pdf/renderer';
konst styly = StyleSheet.create({
 stránka: {
 marginTop: 30,
 velikost písma: 30,
 vycpávka: 20,
 },
 rozložení: {
 marginTop: 30,
 flexDirection: 'řádek',
 justifyContent: 'mezera-mezi'
 }
});
konst Můj dokument = () => (




Dobrý den</Text>
 </View>

Vítejte!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
vývoznívýchozí MůjDokument;

V tomto příkladu použijete Pohled komponenty seskupit další komponenty.

Přidání obrázků do dokumentu PDF

Můžete také vykreslit obrázky v dokumentu PDF pomocí obraz komponenta poskytovaná knihovnou respond-pdf. The obraz komponenta umožňuje zobrazovat obrázky v různých formátech, jako jsou JPEG, PNG, SVG a mnoho dalších.

The obraz složka bere a src prop, který specifikuje URL obrázku a a styl rekvizitu pro přidání vlastních stylů do vašich obrázků.

Například:

import Reagovat z'reagovat';
import { Document, Page, Style Sheet, View, Image } z'@react-pdf/renderer';
konst styly = StyleSheet.create({
 stránka: {
 vycpávka: 20,
 alignItems: 'centrum',
 },
 obraz: {
 šířka: 300,
 výška: 200,
 }
});
konst Můj dokument = () => (



 src=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
vývoznívýchozí MůjDokument;

V tomto příkladu vytváříte dokument PDF s jednou stránkou, která obsahuje obrázek. The obraz komponenta zobrazí obrázek se stylem šířky 300 pixelů a stylem výšky 200 pixelů.

Pravděpodobně budete chtít do dokumentu PDF zahrnout odkazy. Odkazy nasměrují uživatele na určenou adresu URL, která může nabízet doplňkové informace nedostupné v dokumentu PDF. The Odkaz komponenta knihovny Reag-pdf umožňuje vytvářet odkazy ve vašich dokumentech PDF.

Komponenta Link trvá a src podpora pro přesměrování uživatelů, když kliknou na odkaz. Budou přesměrováni na URL uvedenou v komponentě src rekvizita, pokud nějakou definujete.

Chcete-li použít Odkaz komponentu, musíte ji nejprve importovat z knihovny respond-pdf. Poté jej můžete přidat do svého dokumentu PDF takto:

import Reagovat z'reagovat';
import { Document, Page, Style Sheet, View, Link } z'@react-pdf/renderer';
konst styly = StyleSheet.create({
 stránka: {
 vycpávka: 20,
 alignItems: 'centrum',
 },
 odkaz: {
 barva: '#333333',
 textDekorace: 'žádný'
 }
});
konst Můj dokument = () => (



' https://example.com' style={styles.link}>Klikněte na mě</Link>
 </View>
 </Page>
 </Document>
);
vývoznívýchozí MůjDokument;

Výše uvedený příklad vytvoří dokument PDF s jednou stránkou a jedním zobrazením. V zobrazení zobrazujete komponentu Odkaz, která po kliknutí přesměruje uživatele na zadanou adresu URL, “ https://example.com.”

Nyní můžete vytvářet dokumenty PDF pomocí React

React-pdf je výkonná knihovna, která vám umožní generovat dokumenty PDF z vašich komponent React. Soubory PDF můžete vytvářet pomocí Reag-pdf a poté k nim přidávat text, obrázky a odkazy.

Pomocí této knihovny můžete snadno vytvářet profesionálně vypadající soubory PDF s vlastním stylem a rozložením.