Δημιουργήστε αρχεία PDF με ευκολία χρησιμοποιώντας αυτήν τη βιβλιοθήκη React και κάποιο απλό κώδικα.

Το React είναι μια δημοφιλής βιβλιοθήκη JavaScript για τη δημιουργία διεπαφών χρήστη. Είναι δυνατή η δημιουργία αρχείων PDF από στοιχεία React χρησιμοποιώντας τη βιβλιοθήκη react-pdf.

Εδώ θα μάθετε πώς να δημιουργείτε έγγραφα PDF με στοιχεία React χρησιμοποιώντας το react-pdf.

Τι είναι το React-pdf;

Το React-pdf είναι μια βιβλιοθήκη που σας επιτρέπει να δημιουργείτε έγγραφα PDF από τα στοιχεία React. Παρέχει ένα σύνολο στοιχείων που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε το έγγραφο PDF σας και χρησιμοποιεί ένα εικονικό DOM για την απόδοση των στοιχείων σε PDF.

Εγκατάσταση του React-pdf

Για να εγκαταστήσετε το react-pdf χρησιμοποιώντας τη διαχείριση πακέτων κόμβου, εκτελέστε την ακόλουθη εντολή τερματικού στον κατάλογο του έργου σας:

npm εγκατάσταση @react-pdf/renderer --save

Για να το εγκαταστήσετε με τον διαχειριστή πακέτων νήμα, εκτελέστε αυτήν την εντολή:

νήμα προσθέστε @react-pdf/renderer
instagram viewer

Δημιουργία εγγράφου PDF

Για να δημιουργήσετε ένα έγγραφο PDF, θα χρησιμοποιήσετε τα στοιχεία Document, Page και Text του react-pdf. ο Εγγραφο Το στοιχείο είναι υπεύθυνο για τη δημιουργία ενός νέου εγγράφου PDF και την απόδοση του περιεχομένου του. ο Σελίδα Το στοιχείο δημιουργεί μια νέα σελίδα μέσα στο έγγραφο PDF και αποδίδει το περιεχόμενό του. Τέλος, το Κείμενο συστατικό αποδίδει κείμενα μέσα στο έγγραφο PDF.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να δημιουργήσετε ένα έγγραφο PDF χρησιμοποιώντας και τα τρία αυτά στοιχεία:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Document, Text, Page } από'@react-pdf/renderer';
συνθ MyDocument = () => (


Γεια σας</Text>
 </Page>
 </Document>
);
εξαγωγήΠροκαθορισμένο MyDocument;

Σε αυτό το παράδειγμα, δημιουργείτε ένα έγγραφο PDF με μια σελίδα που περιέχει μια γραμμή κειμένου, "Γεια σας". Αφού δημιουργήσετε ένα έγγραφο PDF, πρέπει να το αποδώσετε στην εφαρμογή React.

Για να αποδώσετε το έγγραφο PDF στην εφαρμογή σας, χρησιμοποιήστε το PDFViewer στοιχείο, το οποίο δημιουργεί το έγγραφο PDF.

Εισαγάγετε το PDFViewer συστατικό και τυλίξτε το έγγραφό σας σε αυτό:

εισαγωγή Αντιδρώ από"αντιδρώ"
εισαγωγή { PDFViewer } από'@react-pdf/renderer';
εισαγωγή MyDocument από"./MyDocument";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


 </PDFViewer>
 )
}
εξαγωγήΠροκαθορισμένο App

Κατά την απόδοση της αίτησής σας, θα μοιάζει κάπως έτσι:

Προσθήκη στυλ στο έγγραφο PDF

Για να προσθέσετε στυλ στο έγγραφό σας PDF, μπορείτε να χρησιμοποιήσετε το react-pdf Φύλλο στυλ συστατικό. ο Φύλλο στυλ Το στοιχείο σάς επιτρέπει να ορίσετε προσαρμοσμένα στυλ για το έγγραφο PDF σας.

Για να χρησιμοποιήσετε το Φύλλο στυλ στοιχείο, εισαγάγετε το από τη βιβλιοθήκη react-pdf και ορίστε τα στυλ σας για το έγγραφο PDF.

Για παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Document, Text, Page, Stylesheet } από'@react-pdf/renderer';
συνθ styles = StyleSheet.create({
 σελίδα: {
 στοίχιση κειμένου: 'κέντρο',
 marginTop: 30,
 μέγεθος γραμματοσειράς: 30,
 },
 κείμενο: {
 χρώμα: '#228b22',
 }
});


συνθ MyDocument = () => (


Γεια σας</Text>
 </Page>
 </Document>
);
εξαγωγήΠροκαθορισμένο MyDocument;

Στο μπλοκ κώδικα παραπάνω, προσθέτετε στυλ στο στοιχείο PDF σας. Ορίζετε τα στυλ χρησιμοποιώντας το Φύλλο στυλ.δημιουργία λειτουργία. ο Φύλλο στυλ.δημιουργία η συνάρτηση δημιουργεί ένα αντικείμενο φύλλου στυλ που περιέχει το σελίδα και κείμενο στυλ.

Χρησιμοποιώντας την στυλ στήριγμα, περνάς το σελίδα και κείμενο στυλ στα δικά σας Σελίδα και Κείμενο συστατικά. Αυτό διασφαλίζει ότι τα στυλ σας εφαρμόζονται στο Σελίδα και Κείμενο συστατικά.

Προσθήκη διατάξεων στο έγγραφο PDF

Για να προσθέσετε διατάξεις στο έγγραφο PDF σας, χρησιμοποιείτε το Θέα συστατικό. ο Θέα Το στοιχείο είναι ένα στοιχείο κοντέινερ που παρέχεται από τη βιβλιοθήκη react-pdf.

ο Θέα συστατικό λειτουργεί σαν HTML div—ένα θεμελιώδες στοιχείο HTML. Με αυτό, τυλίγετε άλλα εξαρτήματα, όπως το Κείμενο στοιχείο και ορίστε τις διατάξεις σας προσθέτοντας στυλ στο Θέα συστατικό.

Όπως έτσι:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Document, Text, Page, StyleSheet, View } από'@react-pdf/renderer';
συνθ styles = StyleSheet.create({
 σελίδα: {
 marginTop: 30,
 μέγεθος γραμματοσειράς: 30,
 υλικό παραγεμίσματος: 20,
 },
 διάταξη: {
 marginTop: 30,
 flexDirection: 'σειρά',
 justifyContent: "χώρος μεταξύ"
 }
});


συνθ MyDocument = () => (




Γεια σας</Text>
 </View>

Καλώς ήρθες!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
εξαγωγήΠροκαθορισμένο MyDocument;

Σε αυτό το παράδειγμα, χρησιμοποιείτε το Θέα συστατικά για να ομαδοποιήσετε άλλα στοιχεία.

Προσθήκη εικόνων στο έγγραφο PDF

Μπορείτε επίσης να αποδώσετε εικόνες στο έγγραφο PDF με το Εικόνα στοιχείο που παρέχεται από τη βιβλιοθήκη react-pdf. ο Εικόνα Το στοιχείο σάς επιτρέπει να προβάλλετε εικόνες σε διάφορες μορφές όπως JPEG, PNG, SVG και πολλά άλλα.

ο Εικόνα συστατικό παίρνει α src prop που καθορίζει τη διεύθυνση URL της εικόνας και α στυλ στήριγμα για να προσθέσετε προσαρμοσμένα στυλ στις εικόνες σας.

Για παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Document, Page, StyleSheet, View, Image } από'@react-pdf/renderer';
συνθ styles = StyleSheet.create({
 σελίδα: {
 υλικό παραγεμίσματος: 20,
 στοίχιση στοιχείων: 'κέντρο',
 },
 εικόνα: {
 πλάτος: 300,
 ύψος: 200,
 }
});


συνθ MyDocument = () => (



 src=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
εξαγωγήΠροκαθορισμένο MyDocument;

Σε αυτό το παράδειγμα, δημιουργείτε ένα έγγραφο PDF με μία μόνο σελίδα που περιέχει μια εικόνα. ο Εικόνα Το στοιχείο εμφανίζει μια εικόνα με στυλ πλάτους 300 pixel και στυλ ύψους 200 pixel.

Πιθανότατα θα θέλετε να συμπεριλάβετε συνδέσμους στο έγγραφο PDF σας. Οι σύνδεσμοι κατευθύνουν τον χρήστη σε μια καθορισμένη διεύθυνση URL, η οποία μπορεί να προσφέρει συμπληρωματικές πληροφορίες που δεν είναι διαθέσιμες στο έγγραφο PDF. ο Σύνδεσμος Το στοιχείο της βιβλιοθήκης react-pdf σάς δίνει τη δυνατότητα να δημιουργήσετε συνδέσμους στα έγγραφα PDF σας.

Το στοιχείο Link παίρνει α src να ανακατευθύνει τους χρήστες όταν κάνουν κλικ στον σύνδεσμο. Θα ανακατευθυνθούν στη διεύθυνση URL που καθορίζεται στα στοιχεία του στοιχείου src στήριγμα αν ορίσετε ένα.

Για να χρησιμοποιήσετε το Σύνδεσμος στοιχείο, πρέπει πρώτα να το εισαγάγετε από τη βιβλιοθήκη react-pdf. Στη συνέχεια, μπορείτε να το προσθέσετε στο έγγραφο PDF σας ως εξής:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Document, Page, StyleSheet, View, Link } από'@react-pdf/renderer';
συνθ styles = StyleSheet.create({
 σελίδα: {
 υλικό παραγεμίσματος: 20,
 στοίχιση στοιχείων: 'κέντρο',
 },
 Σύνδεσμος: {
 χρώμα: '#333333',
 κείμενοΔιακόσμηση: 'κανένας'
 }
});


συνθ MyDocument = () => (



' https://example.com' style={styles.link}>Κάντε κλικ σε εμένα</Link>
 </View>
 </Page>
 </Document>
);
εξαγωγήΠροκαθορισμένο MyDocument;

Το παραπάνω παράδειγμα δημιουργεί ένα έγγραφο PDF με μία σελίδα και μία προβολή. Μέσα στην προβολή, εμφανίζετε ένα στοιχείο σύνδεσης στο οποίο, όταν κάνετε κλικ, ανακατευθύνει τον χρήστη στην καθορισμένη διεύθυνση URL, " https://example.com.”

Τώρα μπορείτε να δημιουργήσετε έγγραφα PDF χρησιμοποιώντας το React

Το React-pdf είναι μια ισχυρή βιβλιοθήκη που σας επιτρέπει να δημιουργείτε έγγραφα PDF από τα στοιχεία του React. Μπορείτε να δημιουργήσετε αρχεία PDF χρησιμοποιώντας το react-pdf και στη συνέχεια να προσθέσετε κείμενο, εικόνες και συνδέσμους σε αυτά.

Χρησιμοποιώντας αυτήν τη βιβλιοθήκη, μπορείτε εύκολα να δημιουργήσετε αρχεία PDF με επαγγελματική εμφάνιση με προσαρμοσμένο στυλ και διάταξη.