Εξαγωγή γραφημάτων πίνακα ελέγχου σε PDF σε 5 βήματα.
Εδώ θα εξηγήσω πόσο εύκολο είναι να εξαγάγετε γραφήματα από τον Πίνακα ελέγχου με μία από τις βιβλιοθήκες JavaScript ανοιχτού κώδικα και πολλές γραμμές κώδικα.
Για να ξεκινήσω, μόλις δημιούργησα έναν απλό πίνακα ελέγχου με 3 γραφήματα: γράφημα γραμμών, γράφημα ράβδων και γράφημα πίτας. Για τη δημιουργία γραφημάτων χρησιμοποίησα το ChartJS, αλλά μπορούμε να χρησιμοποιήσουμε διαφορετικές βιβλιοθήκες γραφημάτων όπως D3, ECcharts κ.λπ. Στην κεφαλίδα κάθε γραφικού στοιχείου, πρέπει να προσθέσουμε ένα κουμπί που θα ενεργοποιήσει την εξαγωγή. Δείτε πώς φαίνεται το ταμπλό:
Το επόμενο βήμα είναι η υλοποίηση της λειτουργικότητας εξαγωγής. Για αυτό, μπορούμε να χρησιμοποιήσουμε jsPDF. Είναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα που θα μας βοηθήσει να μετατρέψουμε γραφήματα σε PDF. Μπορεί να χρησιμοποιηθεί με οποιοδήποτε πλαίσιο JS, αλλά στο παράδειγμά μου, θα το χρησιμοποιήσω με vanilla JavaScript.
Η βιβλιοθήκη μπορεί να εισαχθεί σε ένα έργο χρησιμοποιώντας το CDN. Η λειτουργικότητα θα πρέπει να καλείται μόλις κάνουμε κλικ στο κουμπί εξαγωγής. Ας το εφαρμόσουμε στα επόμενα πέντε βήματα:
- Επιλογή στοιχείου γραφήματος.
- Μετατροπή του σε εικόνα.
- Δήλωση jsPdf με προτιμώμενο προσανατολισμό.
- Προσθήκη εικόνας σε PDF με μορφή png και σωστές διαστάσεις.
- Αποθήκευση PDF.
Δείτε πώς φαίνεται ο κώδικας:
Έχω τυλίξει όλα αυτά τα βήματα που αναφέρονται παραπάνω σε μια ξεχωριστή συνάρτηση για να αποφύγω την αντιγραφή κώδικα. Όλα όσα απαιτεί η λειτουργία είναι ένα αναγνωριστικό στοιχείων και διαστάσεων. Αυτά περνούν ως επιχειρήματα. Παρεμπιπτόντως, την πλήρη εφαρμογή του πίνακα ελέγχου μπορείτε να βρείτε στο GitHub μου.
Όπως βλέπετε η υλοποίηση χρειάζεται μόλις 5 γραμμές κώδικα και η λειτουργικότητα έχει ολοκληρωθεί. Αξίζει να πούμε ότι αυτό είναι απλώς ένα πολύ απλό παράδειγμα. Στο πραγματικό σενάριο, ίσως, θα θέλαμε να προσθέσουμε κάποιο κείμενο, τίτλο, σελιδοποίηση και ούτω καθεξής. Και είναι πραγματικά δυνατό, για αυτό πρέπει να αναφερθούμε στα jsPDF έγγραφα.
Ελπίζω ο γρήγορος οδηγός μου να ήταν χρήσιμος. Δοκιμάστε το μόνοι σας, γιατί η εξάσκηση είναι η καλύτερη ολοκλήρωση. Στην υγειά σας!
