Ērti izveidojiet PDF failus, izmantojot šo React bibliotēku un vienkāršu kodu.

React ir populāra JavaScript bibliotēka lietotāja saskarņu veidošanai. Ir iespējams izveidot PDF failus no React komponentiem, izmantojot react-pdf bibliotēku.

Šeit jūs uzzināsit, kā izveidot PDF dokumentus ar React komponentiem, izmantojot react-pdf.

Kas ir React-pdf?

React-pdf ir bibliotēka, kas ļauj jums izveidot PDF dokumenti no React komponentiem. Tas nodrošina komponentu kopu, ko varat izmantot, lai izveidotu PDF dokumentu, un izmanto virtuālo DOM, lai padarītu komponentus PDF formātā.

React-pdf instalēšana

Lai instalētu react-pdf, izmantojot mezgla pakotņu pārvaldnieku, projekta direktorijā palaidiet šādu termināļa komandu:

npm instalēt @react-pdf/renderer --save

Lai to instalētu, izmantojot dzijas pakotņu pārvaldnieku, palaidiet šo komandu:

dzijas pievieno @react-pdf/renderer

PDF dokumenta izveide

Lai izveidotu PDF dokumentu, jūs izmantosit react-pdf komponentus Dokuments, Lapa un Teksts. The Dokuments komponents ir atbildīgs par jauna PDF dokumenta izveidi un tā satura renderēšanu. The

instagram viewer
Lappuse komponents izveido jaunu lapu PDF dokumentā un atveido tā saturu. Visbeidzot, Teksts komponents atveido tekstus PDF dokumentā.

Tālāk ir sniegts piemērs, kā izveidot PDF dokumentu, izmantojot visus trīs šos komponentus.

imports Reaģēt no'reaģēt';
imports { Dokuments, teksts, lapa } no'@react-pdf/renderer';

konst MansDokuments = () => (


Sveiki tur</Text>
</Page>
</Document>
);

eksportētnoklusējuma MyDocument;

Šajā piemērā jūs izveidojat PDF dokumentu ar vienu lapu, kurā ir viena teksta rindiņa “Sveiki!”. Pēc PDF dokumenta izveides tas ir jāatveido savā React lietojumprogrammā.

Lai savā lietojumprogrammā renderētu PDF dokumentu, izmantojiet PDF Viewer komponents, kas ģenerē PDF dokumentu.

Importēt PDF Viewer komponentu un iesaiņojiet tajā savu dokumentu:

imports Reaģēt no"reaģēt"
imports {PDFViewer} no'@react-pdf/renderer';
imports MansDokuments no"./MansDokuments";

funkcijuApp() {
atgriezties (


</PDFViewer>
)
}

eksportētnoklusējuma App

Atveidojot jūsu pieteikumu, tas izskatīsies apmēram šādi:

Stilu pievienošana PDF dokumentam

Lai PDF dokumentam pievienotu stilus, varat izmantot react-pdf Stila lapa komponents. The Stila lapa komponents ļauj definēt pielāgotus stilus jūsu PDF dokumentam.

Lai izmantotu Stila lapa komponentu, importējiet to no react-pdf bibliotēkas un definējiet savus PDF dokumenta stilus.

Piemēram:

imports Reaģēt no'reaģēt';
imports { Dokuments, teksts, lapa, stila lapa } no'@react-pdf/renderer';

konst stili = StyleSheet.create({
lappuse: {
textAlign: 'centrs',
marginTop: 30,
fonta izmērs: 30,
},
teksts: {
krāsa: '#228b22',
}
});

konst MansDokuments = () => (


Sveiki tur</Text>
</Page>
</Document>
);

eksportētnoklusējuma MyDocument;

Iepriekš esošajā koda blokā jūs pievienojat PDF komponentam stilus. Jūs definējat stilus, izmantojot Stylesheet.create funkciju. The Stylesheet.create funkcija izveido stila lapas objektu, kurā ir lappuse un tekstu stilus.

Izmantojot stils prop, jūs izturat lappuse un tekstu stilus jūsu Lappuse un Teksts sastāvdaļas. Tas nodrošina, ka jūsu stili attiecas uz Lappuse un Teksts sastāvdaļas.

Izkārtojumu pievienošana PDF dokumentam

Lai PDF dokumentam pievienotu izkārtojumus, izmantojiet Skatīt komponents. The Skatīt komponents ir konteinera komponents, ko nodrošina react-pdf bibliotēka.

The Skatīt komponents darbojas kā HTML divHTML pamatelements. Ar to jūs iesaiņojat citas sastāvdaļas, piemēram, Teksts komponentu un definējiet savus izkārtojumus, pievienojot stilus Skatīt komponents.

Tā kā:

imports Reaģēt no'reaģēt';
imports { Dokuments, teksts, lapa, stila lapa, skats } no'@react-pdf/renderer';

konst stili = StyleSheet.create({
lappuse: {
marginTop: 30,
fonta izmērs: 30,
polsterējums: 20,
},
izkārtojums: {
marginTop: 30,
flexDirection: 'rinda',
justifyContent: "atstarpe starp"
}
});

konst MansDokuments = () => (




Sveiki tur</Text>
</View>

Laipni lūdzam!!!</Text>
</View>
</View>
</Page>
</Document>
);

eksportētnoklusējuma MyDocument;

Šajā piemērā jūs izmantojat Skatīt komponentus, lai grupētu citus komponentus.

Attēlu pievienošana PDF dokumentam

Varat arī renderēt attēlus PDF dokumentā, izmantojot Attēls komponents, ko nodrošina react-pdf bibliotēka. The Attēls komponents ļauj parādīt attēlus dažādos formātos, piemēram, JPEG, PNG, SVG un daudzos citos formātos.

The Attēls komponents aizņem a src prop, kas norāda attēla URL un a stils atbalsts, lai attēliem pievienotu pielāgotus stilus.

Piemēram:

imports Reaģēt no'reaģēt';
imports { Dokuments, lapa, stila lapa, skats, attēls } no'@react-pdf/renderer';

konst stili = StyleSheet.create({
lappuse: {
polsterējums: 20,
alignItems: 'centrs',
},
attēls: {
platums: 300,
augstums: 200,
}
});

konst MansDokuments = () => (



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

eksportētnoklusējuma MyDocument;

Šajā piemērā jūs veidojat PDF dokumentu ar vienu lapu, kurā ir attēls. The Attēls komponents parāda attēlu ar 300 pikseļu platuma stilu un 200 pikseļu augstuma stilu.

Iespējams, PDF dokumentā vēlēsities iekļaut saites. Saites novirza lietotāju uz norādīto URL, kas var piedāvāt papildu informāciju, kas PDF dokumentā nav pieejama. The Saite React-pdf bibliotēkas sastāvdaļa ļauj izveidot saites savos PDF dokumentos.

Saites komponents aizņem a src lai novirzītu lietotājus, kad viņi noklikšķina uz saites. Tie tiks novirzīti uz komponentā norādīto URL src prop, ja tādu definējat.

Lai izmantotu Saite komponents, vispirms tas ir jāimportē no react-pdf bibliotēkas. Pēc tam varat to pievienot savam PDF dokumentam šādi:

imports Reaģēt no'reaģēt';
imports { Dokuments, lapa, stila lapa, skats, saite } no'@react-pdf/renderer';

konst stili = StyleSheet.create({
lappuse: {
polsterējums: 20,
alignItems: 'centrs',
},
saite: {
krāsa: '#333333',
textDecoration: 'neviens'
}
});

konst MansDokuments = () => (



' https://example.com' style={styles.link}>Noklikšķiniet uz manis</Link>
</View>
</Page>
</Document>
);

eksportētnoklusējuma MyDocument;

Iepriekš minētajā piemērā tiek izveidots PDF dokuments ar vienu lapu un vienu skatu. Skatā tiek rādīts saites komponents, kas, noklikšķinot uz tā, novirza lietotāju uz norādīto URL. https://example.com.”

Tagad varat izveidot PDF dokumentus, izmantojot React

React-pdf ir jaudīga bibliotēka, kas ļauj ģenerēt PDF dokumentus no jūsu React komponentiem. Varat izveidot PDF failus, izmantojot react-pdf, pēc tam pievienot tiem tekstu, attēlus un saites.

Izmantojot šo bibliotēku, varat viegli ģenerēt profesionāla izskata PDF failus ar pielāgotu stilu un izkārtojumu.