PDF-documenten maken met uw React-componenten met behulp van React-pdf

React is een populaire JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces. Het is mogelijk om PDF-bestanden te maken van React-componenten met behulp van de react-pdf-bibliotheek.

Hier leert u hoe u PDF-documenten kunt maken met React-componenten met behulp van react-pdf.

Wat is React-pdf?

React-pdf is een bibliotheek waarmee u kunt maken PDF-documenten van React-componenten. Het biedt een set componenten die u kunt gebruiken om uw PDF-document te bouwen en gebruikt een virtuele DOM om de componenten naar PDF te renderen.

React-pdf installeren

Om react-pdf te installeren met behulp van de node-pakketbeheerder, voert u de volgende terminalopdracht uit in de map van uw project:

npm install @react-pdf/renderer --save

Om het in plaats daarvan met de garenpakketbeheerder te installeren, voert u deze opdracht uit:

garen toevoegen @react-pdf/renderer

Een PDF-document maken

Om een ​​PDF-document te maken, gebruikt u de componenten Document, Pagina en Tekst van react-pdf. De

Document component is verantwoordelijk voor het maken van een nieuw PDF-document en het weergeven van de inhoud ervan. De Bladzijde component maakt een nieuwe pagina binnen het PDF-document en geeft de inhoud ervan weer. eindelijk, de Tekst component geeft teksten weer binnen het PDF-document.

Hier is een voorbeeld van hoe u een PDF-document kunt maken met behulp van alle drie deze componenten:

importeren Reageer van'Reageer';
importeren { Document, tekst, pagina } van'@react-pdf/renderer';
const MijnDocument = () => (


Hallo daar</Text>
 </Page>
 </Document>
);
exporterenstandaard Mijn document;

In dit voorbeeld maakt u een PDF-document met een enkele pagina met een enkele regel tekst, "Hallo daar". Nadat u een PDF-document hebt gemaakt, moet u het weergeven in uw React-toepassing.

Om het PDF-document in uw toepassing weer te geven, gebruikt u de PDF-viewer component, die het PDF-document genereert.

Importeer de PDF-viewer component en wikkel uw document erin:

importeren Reageer van"Reageer"
importeren { PDF-viewer } van'@react-pdf/renderer';
importeren Mijn document van"./Mijn document";
functieapp() {
opbrengst (


 </PDFViewer>
 )
}
exporterenstandaard app

Bij het weergeven van uw aanvraag ziet deze er ongeveer zo uit:

Stijlen toevoegen aan het PDF-document

Om stijlen aan uw PDF-document toe te voegen, kunt u react-pdf's gebruiken Stijlblad bestanddeel. De Stijlblad component kunt u aangepaste stijlen voor uw PDF-document definiëren.

Om de Stijlblad component, importeer het uit de react-pdf-bibliotheek en definieer uw stijlen voor het PDF-document.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren { Document, Tekst, Pagina, Stylesheet } van'@react-pdf/renderer';
const stijlen = StyleSheet.create({
 bladzijde: {
 tekstAlign: 'centrum',
 margeTop: 30,
 lettertypegrootte: 30,
 },
 tekst: {
 kleur: '#228b22',
 }
});
const MijnDocument = () => (


Hallo daar</Text>
 </Page>
 </Document>
);
exporterenstandaard Mijn document;

In het bovenstaande codeblok voegt u stijlen toe aan uw PDF-component. U definieert de stijlen met behulp van de Stylesheet.creëren functie. De Stylesheet.creëren functie maakt een stylesheet-object met de bladzijde En tekst stijlen.

De... gebruiken stijl prop, je passeert de bladzijde En tekst stijlen voor jou Bladzijde En Tekst componenten. Dit zorgt ervoor dat uw stijlen van toepassing zijn op de Bladzijde En Tekst componenten.

Lay-outs toevoegen aan het PDF-document

Om lay-outs aan uw PDF-document toe te voegen, gebruikt u de Weergave bestanddeel. De Weergave component is een containercomponent die wordt geleverd door de react-pdf-bibliotheek.

De Weergave component werkt als een HTML div—een fundamenteel HTML-element. Hiermee verpak je andere componenten, zoals de Tekst component en definieer uw lay-outs door stijlen toe te voegen aan het Weergave bestanddeel.

Zoals zo:

importeren Reageer van'Reageer';
importeren { Document, Tekst, Pagina, StyleSheet, Weergave } van'@react-pdf/renderer';
const stijlen = StyleSheet.create({
 bladzijde: {
 margeTop: 30,
 lettertypegrootte: 30,
 opvulling: 20,
 },
 indeling: {
 margeTop: 30,
 flexDirection: 'rij',
 rechtvaardigenInhoud: 'ruimte tussen'
 }
});
const MijnDocument = () => (




Hallo daar</Text>
 </View>

Welkom!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
exporterenstandaard Mijn document;

In dit voorbeeld gebruik je de Weergave componenten om andere componenten te groeperen.

Afbeeldingen toevoegen aan het PDF-document

U kunt ook afbeeldingen weergeven in het PDF-document met de Afbeelding component geleverd door de react-pdf-bibliotheek. De Afbeelding component kunt u afbeeldingen in verschillende formaten weergeven, zoals JPEG, PNG, SVG en nog veel meer.

De Afbeelding onderdeel duurt een src prop die de URL van de afbeelding specificeert en een stijl prop om aangepaste stijlen aan uw afbeeldingen toe te voegen.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren { Document, Pagina, StyleSheet, Weergave, Afbeelding } van'@react-pdf/renderer';
const stijlen = StyleSheet.create({
 bladzijde: {
 opvulling: 20,
 uitlijnenItems: 'centrum',
 },
 afbeelding: {
 breedte: 300,
 hoogte: 200,
 }
});
const MijnDocument = () => (



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

In dit voorbeeld maakt u een PDF-document met een enkele pagina die een afbeelding bevat. De Afbeelding component geeft een afbeelding weer met een breedtestijl van 300 pixels en een hoogtestijl van 200 pixels.

U wilt waarschijnlijk links opnemen in uw PDF-document. Links leiden de gebruiker naar een aangewezen URL, die aanvullende informatie kan bieden die niet beschikbaar is in het PDF-document. De Koppeling onderdeel van de react-pdf-bibliotheek stelt u in staat om koppelingen te maken binnen uw PDF-documenten.

De Link-component neemt een src prop om gebruikers om te leiden wanneer ze op de link klikken. Ze worden omgeleid naar de URL die is opgegeven in de component src prop als je er een definieert.

Om de Koppeling component, moet u het eerst importeren uit de react-pdf-bibliotheek. U kunt het dan als volgt aan uw PDF-document toevoegen:

importeren Reageer van'Reageer';
importeren { Document, Pagina, StyleSheet, Weergave, Link } van'@react-pdf/renderer';
const stijlen = StyleSheet.create({
 bladzijde: {
 opvulling: 20,
 uitlijnenItems: 'centrum',
 },
 koppeling: {
 kleur: '#333333',
 tekstDecoratie: 'geen'
 }
});
const MijnDocument = () => (



' https://example.com' style={styles.link}>Klik op mij</Link>
 </View>
 </Page>
 </Document>
);
exporterenstandaard Mijn document;

In het bovenstaande voorbeeld wordt een PDF-document gemaakt met één pagina en één weergave. Binnen de weergave geeft u een koppelingscomponent weer die, wanneer erop wordt geklikt, de gebruiker omleidt naar de opgegeven URL, " https://example.com.”

Nu kunt u PDF-documenten maken met React

React-pdf is een krachtige bibliotheek waarmee u PDF-documenten kunt genereren op basis van uw React-componenten. U kunt PDF-bestanden maken met behulp van react-pdf en er vervolgens tekst, afbeeldingen en links aan toevoegen.

Door deze bibliotheek te gebruiken, kunt u eenvoudig professioneel ogende PDF-bestanden genereren met aangepaste styling en lay-out.