Vytvárajte súbory PDF jednoducho pomocou tejto knižnice React a nejakého jednoduchého kódu.

React je populárna knižnica JavaScript na vytváranie používateľských rozhraní. Súbory PDF je možné vytvárať z komponentov React pomocou knižnice React-pdf.

Tu sa dozviete, ako vytvárať dokumenty PDF s komponentmi React pomocou React-pdf.

Čo je React-pdf?

React-pdf je knižnica, ktorá vám umožňuje vytvárať PDF dokumenty z komponentov React. Poskytuje sadu komponentov, ktoré môžete použiť na vytvorenie dokumentu PDF, a používa virtuálny DOM na vykreslenie komponentov do PDF.

Inštalácia React-pdf

Ak chcete nainštalovať response-pdf pomocou správcu balíkov uzlov, spustite nasledujúci príkaz terminálu v adresári vášho projektu:

npm install @react-pdf/renderer --save

Ak ho chcete nainštalovať pomocou správcu balíkov priadzí, spustite tento príkaz:

pridať priadzu @react-pdf/renderer

Vytvorenie dokumentu PDF

Na vytvorenie dokumentu PDF použijete komponenty Document, Page a Text od reakcie-pdf. The Dokument komponent je zodpovedný za vytvorenie nového dokumentu PDF a vykreslenie jeho obsahu. The

instagram viewer
Stránka komponent vytvorí novú stránku v dokumente PDF a vykreslí jej obsah. Nakoniec, Text komponent vykresľuje texty v dokumente PDF.

Tu je príklad toho, ako môžete vytvoriť dokument PDF pomocou všetkých troch týchto komponentov:

importovať Reagovať od'reagovať';
importovať { Document, Text, Page } od'@react-pdf/renderer';
konšt Môj dokument = () => (


Dobrý deň</Text>
 </Page>
 </Document>
);
exportpredvolená MyDocument;

V tomto príklade vytvoríte dokument PDF s jednou stranou obsahujúcou jeden riadok textu „Ahoj“. Po vytvorení dokumentu PDF ho musíte vykresliť vo svojej aplikácii React.

Ak chcete vykresliť dokument PDF vo svojej aplikácii, použite Prehliadač PDF komponent, ktorý generuje dokument PDF.

Importovať Prehliadač PDF komponent a zabaľte do neho svoj dokument:

importovať Reagovať od"reagovať"
importovať { PDF Viewer } od'@react-pdf/renderer';
importovať MyDocument od"./MyDocument";
funkciuApp() {
vrátiť (


 </PDFViewer>
 )
}
exportpredvolená App

Po vykreslení aplikácie bude vyzerať asi takto:

Pridanie štýlov do dokumentu PDF

Ak chcete do dokumentu PDF pridať štýly, môžete použiť súbory Reag-pdf StyleSheet komponent. The StyleSheet komponent vám umožňuje definovať vlastné štýly pre váš dokument PDF.

Ak chcete použiť Šablóna so štýlmi komponent, importujte ho z knižnice Reag-pdf a definujte svoje štýly pre dokument PDF.

Napríklad:

importovať Reagovať od'reagovať';
importovať { Document, Text, Page, Stylesheet } od'@react-pdf/renderer';
konšt styles = StyleSheet.create({
 strana: {
 textAlign: 'centrum',
 marginTop: 30,
 veľkosť písma: 30,
 },
 text: {
 farba: '#228b22',
 }
});


konšt Môj dokument = () => (


Dobrý deň</Text>
 </Page>
 </Document>
);
exportpredvolená MyDocument;

V bloku kódu vyššie pridávate štýly do komponentu PDF. Štýly definujete pomocou Stylesheet.create funkciu. The Stylesheet.create funkcia vytvorí objekt šablóny so štýlmi obsahujúci stránku a text štýlov.

Pomocou štýl rekvizita, miniete stránku a text štýly podľa vášho Stránka a Text komponentov. To zaisťuje, že vaše štýly sa budú vzťahovať na Stránka a Text komponentov.

Pridanie rozložení do dokumentu PDF

Ak chcete do dokumentu PDF pridať rozloženia, použite vyhliadka komponent. The vyhliadka komponent je kontajnerový komponent poskytovaný knižnicou Reag-pdf.

The vyhliadka komponent funguje ako HTML div—základný prvok HTML. S ním zabalíte ďalšie komponenty, ako napr Text a definujte svoje rozloženia pridaním štýlov do vyhliadka komponent.

Ako:

importovať Reagovať od'reagovať';
importovať { Document, Text, Page, Style Sheet, View } od'@react-pdf/renderer';
konšt styles = StyleSheet.create({
 strana: {
 marginTop: 30,
 veľkosť písma: 30,
 vypchávka: 20,
 },
 rozloženie: {
 marginTop: 30,
 flexDirection: 'riadok',
 justifyContent: 'medzera-medzi'
 }
});


konšt Môj dokument = () => (




Dobrý deň</Text>
 </View>

Vitajte!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
exportpredvolená MyDocument;

V tomto príklade použijete vyhliadka komponenty na zoskupenie iných komponentov.

Pridanie obrázkov do dokumentu PDF

Obrázky v dokumente PDF môžete tiež vykresliť pomocou Obrázok komponent poskytovaný knižnicou respond-pdf. The Obrázok komponent umožňuje zobrazovať obrázky v rôznych formátoch, ako sú JPEG, PNG, SVG a mnoho ďalších.

The Obrázok komponent trvá a src rekvizita, ktorá určuje adresu URL obrázka a a štýl rekvizita na pridanie vlastných štýlov do vašich obrázkov.

Napríklad:

importovať Reagovať od'reagovať';
importovať { Document, Page, Style Sheet, View, Image } od'@react-pdf/renderer';
konšt styles = StyleSheet.create({
 strana: {
 vypchávka: 20,
 alignItems: 'centrum',
 },
 obrázok: {
 šírka: 300,
 výška: 200,
 }
});


konšt Môj dokument = () => (



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

V tomto príklade vytvárate dokument PDF s jednou stránkou, ktorá obsahuje obrázok. The Obrázok komponent zobrazí obrázok so štýlom šírky 300 pixelov a štýlom výšky 200 pixelov.

Pravdepodobne budete chcieť do dokumentu PDF zahrnúť odkazy. Odkazy nasmerujú používateľa na určenú adresu URL, ktorá môže ponúkať doplňujúce informácie nedostupné v dokumente PDF. The Odkaz komponent knižnice Reag-pdf vám umožňuje vytvárať odkazy vo vašich dokumentoch PDF.

Komponent Link trvá a src podpora na presmerovanie používateľov po kliknutí na odkaz. Budú presmerovaní na URL zadanú v komponente src rekvizita, ak ju definujete.

Ak chcete použiť Odkaz komponent, najprv ho musíte importovať z knižnice respond-pdf. Potom ho môžete pridať do dokumentu PDF takto:

importovať Reagovať od'reagovať';
importovať { Document, Page, Style Sheet, View, Link } od'@react-pdf/renderer';
konšt styles = StyleSheet.create({
 strana: {
 vypchávka: 20,
 alignItems: 'centrum',
 },
 odkaz: {
 farba: '#333333',
 textDecoration: 'žiadny'
 }
});


konšt Môj dokument = () => (



' https://example.com' style={styles.link}>Klikni na mňa</Link>
 </View>
 </Page>
 </Document>
);
exportpredvolená MyDocument;

Vyššie uvedený príklad vytvorí dokument PDF s jednou stranou a jedným zobrazením. V zobrazení zobrazujete komponent odkazu, ktorý po kliknutí presmeruje používateľa na zadanú adresu URL, “ https://example.com.”

Teraz môžete vytvárať dokumenty PDF pomocou React

React-pdf je výkonná knižnica, ktorá vám umožňuje vytvárať dokumenty PDF z vašich komponentov React. Súbory PDF môžete vytvoriť pomocou funkcie Reag-pdf a potom k nim pridať text, obrázky a odkazy.

Pomocou tejto knižnice môžete jednoducho vytvárať profesionálne vyzerajúce súbory PDF s vlastným štýlom a rozložením.