Πώς να μετατρέψετε δεδομένα JSON σε υπολογιστικό φύλλο Excel με το Angular

Ως προγραμματιστής, είστε ανοιχτοί στο να αντιμετωπίζετε καθημερινά νέες προκλήσεις σε διάφορα έργα στα οποία μπορεί να εργάζεστε. Οι εφαρμογές Ιστού μερικές φορές πρέπει να εκτελέσουν κάποιες επιπλέον εργασίες για να επιτύχουν διαφορετικούς στόχους ανάλογα με τις επιχειρηματικές ή τεχνικές απαιτήσεις.

Ίσως χρειαστεί να συλλέξετε δεδομένα από ένα API και να τα επεξεργαστείτε σε διαφορετική μορφή, όπως PDF, XML, DOCX ή XLSX.

Σε αυτόν τον οδηγό, θα μάθετε πώς να μετατρέπετε τα δεδομένα JSON που λαμβάνονται από μια απάντηση API σε ένα καλά οργανωμένο υπολογιστικό φύλλο Excel στην εφαρμογή Angular.

Τι είναι η βιβλιοθήκη XLSX;

Η βιβλιοθήκη Xlsx είναι ένας αποτελεσματικός πόρος για προγραμματιστές Angular που θέλουν να μετατρέψουν τα δεδομένα JSON από μια απάντηση API σε ένα καθαρό υπολογιστικό φύλλο Excel. Μέσω της χρήσης αυτής της ενότητας, οι προγραμματιστές μπορούν γρήγορα να πραγματοποιήσουν λήψη και τροποποίηση δεδομένων JSON.

Μπορείτε να χρησιμοποιήσετε τη βιβλιοθήκη Xlsx για να δημιουργήσετε αναφορές για την ομάδα σας ή για να παρουσιάσετε δεδομένα με νέους τρόπους. Εάν θέλετε έναν γρήγορο και εύκολο τρόπο διαχείρισης των δεδομένων σας σε εφαρμογές JavaScript, αυτή είναι μια καλή επιλογή.

Πώς να διαμορφώσετε τη βιβλιοθήκη XLSX με μια γωνιακή εφαρμογή

Πριν ξεκινήσετε με τη βιβλιοθήκη Xlsx στην εφαρμογή Angular, είναι σημαντικό να έχετε ρυθμίσει ένα περιβάλλον ανάπτυξης Node.js και Angular στον υπολογιστή σας. Με το Node.js εγκατεστημένο, το Angular είναι εύκολο να ρυθμιστεί εκτελώντας npm εγκατάσταση -g @angular/cli σε τερματικό.

Δημιουργήστε ένα νέο έργο Angular εκτελώντας ng new [your-angular-app-name] στο τερματικό. Στη συνέχεια, πλοηγηθείτε στον κατάλογο του έργου όπως φαίνεται παρακάτω:

Μπορείτε επίσης να ξεκινήσετε έναν τοπικό διακομιστή ανάπτυξης εκτελώντας ng σερβίρω --ο, το οποίο σας δίνει τη δυνατότητα να προβάλετε την εφαρμογή Angular και τις αλλαγές που έγιναν σε αυτήν ζωντανά στο πρόγραμμα περιήγησης.

Έχοντας ρυθμίσει μια εφαρμογή Angular, η εγκατάσταση της βιβλιοθήκης Xlsx είναι μια απλή διαδικασία που μπορείτε να ολοκληρώσετε απλά εκτελώντας npm εγκατάσταση xlsx --save. Αυτή η εντολή θα εγκαταστήσει τις εξαρτήσεις που απαιτούνται για τη χρήση της βιβλιοθήκης Xlsx.

Πώς να μετατρέψετε δεδομένα JSON σε μορφή XLSX στο Angular

Με το Angular CLI, μπορείτε να δημιουργήσετε μια νέα υπηρεσία εκτελώντας το ng δημιουργία υπηρεσίας [όνομα υπηρεσίας] εντολή στο τερματικό. Για παράδειγμα, σε αυτήν την περίπτωση, μπορείτε να δημιουργήσετε την υπηρεσία Excel που χρειάζεστε χρησιμοποιώντας ng δημιουργία υπηρεσίας ExcelService.

Αυτό παράγω η εντολή θα δημιουργήσει το αρχείο υπηρεσίας: ExcelService.service.ts, στο src/app κατάλογο του έργου. Το αρχείο μοιάζει από προεπιλογή ως εξής:

εισαγωγή { Ενέσιμο } από'@angular/core'; 
@Ενέσιμα({ παρέχεταιΣε: 'ρίζα' }) 
εξαγωγήτάξηExcelServiceService{
κατασκευαστής() { } 
}

Αυτό ExcelService το αρχείο θα χειριστεί τη λειτουργία εξαγωγής δεδομένων σε μορφή Excel. Ενημερώστε το ExcelService.service.ts αρχείο για να μοιάζει με τον παρακάτω κώδικα:

εισαγωγή { Ενέσιμο } από'@angular/core'; 
εισαγωγή * όπως και XLSX από'xlsx'; 
συνθ EXCEL_EXTENSION = '.xlsx'; // επέκταση αρχείου excel
@Ενέσιμα({ παρέχεταιΣε: 'ρίζα' }) 
εξαγωγήτάξηExcelServiceService{ 
κατασκευαστής () { }
δημόσιοexportToExcel(στοιχείο: οποιοδήποτε, Όνομα αρχείου: συμβολοσειρά): κενός{
// Δημιουργήστε βιβλίο εργασίας και προσθέστε το φύλλο εργασίας
συνθ ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (στοιχείο);
συνθ βιβλίο εργασίας: XLSX.WorkBook = XLSX.utils.book_new(); 
// αποθήκευση στο αρχείο
 XLSX.utils.book_append_sheet (βιβλίο εργασίας, ws, 'Φύλλο 1');
 XLSX.writeFile (βιβλίο εργασίας, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Στον παραπάνω κωδικό, εισάγετε το Xlsx βιβλιοθήκη και να δημιουργήσετε μια σταθερή μεταβλητή, EXCEL_EXTENSION για να αποθηκεύσετε την επέκταση αρχείου Excel.

ο exportToExcel Η μέθοδος δέχεται δύο παραμέτρους: στοιχείο και όνομα αρχείου. Η παράμετρος στοιχείου αντιπροσωπεύει τα δεδομένα προς εξαγωγή στο αρχείο Excel, ενώ το όνομα αρχείου παράμετρος είναι το όνομα του αρχείου Excel.

Για να εξαγάγετε τα δεδομένα στο αρχείο Excel, δημιουργήστε ένα φύλλο εργασίας χρησιμοποιώντας το json_to_sheet μέθοδο της βιβλιοθήκης Xlsx. Δημιουργήστε επίσης ένα βιβλίο εργασίας χρησιμοποιώντας τη βιβλιοθήκη βιβλίο_νέο μέθοδος.

Στη συνέχεια, προσθέστε το φύλλο εργασίας στο βιβλίο εργασίας με το book_append_sheet μέθοδο και αποθηκεύστε το σε ένα αρχείο χρησιμοποιώντας writeFile.

Νωρίτερα, δημιουργήσατε μια υπηρεσία Excel για να διευκολύνετε τη διαδικασία λήψης και μετατροπής δεδομένων JSON σε φύλλο Excel. Για να χρησιμοποιήσετε αυτήν την υπηρεσία, πρέπει δημιουργήστε το σχετικό στοιχείο Angular και εισάγετε το αρχείο υπηρεσίας σε αυτό.

εισαγωγή { ExcelService } από"./excel.service";

Στη συνέχεια, πρέπει να το εισάγετε στον κατασκευαστή του στοιχείου ως εξής:

κατασκευαστής(ιδιωτικό excelService: ExcelService) { 
... 
}

Στη συνέχεια, μπορείτε να προχωρήσετε στην υλοποίηση της συνάρτησης (exportExcel) όπου θα χρησιμοποιήσετε το exportToExcel μέθοδος εξαγωγής JSON στο Excel. Ο παρακάτω κώδικας δείχνει πώς να το κάνετε αυτό.

exportExcel(): κενός { 
συνθ fileToExport = Αυτό.apiJsonResponseData.map((είδη: οποιαδήποτε) => { 
ΕΠΙΣΤΡΟΦΗ {
"Ταυτότητα χρήστη": items?.userId,
"Ταυτότητα": αντικείμενα;.id,
"Τίτλος": αντικείμενα;.τίτλος,
"Σώμα": αντικείμενα;.σώμα
 } 
 });
Αυτό.excelService.exportToExcel(
 fileToExport,
'YourExcelFile-' + νέοςΗμερομηνία().getTime() + '.xlsx'
 );
}

Στον παραπάνω κώδικα, έχετε ορίσει το exportExcel μέθοδος κλήσης του exportToExcel μέθοδος του ExcelService. Η νέα μεταβλητή, fileToExport, αποθηκεύει τα δεδομένα για εξαγωγή. ο apiJsonResponseData Ο πίνακας περιέχει τα δεδομένα JSON που λαμβάνονται από την απόκριση API.

Στη συνέχεια, το exportToExcel μέθοδος του excelService παίρνει το fileToExport και την προτίμησή σας όνομα αρχείου. Παρατηρήστε πώς μπορείτε να προσθέσετε την τρέχουσα χρονική σήμανση στο όνομα αρχείου για να βεβαιωθείτε ότι είναι μοναδικό. Αυτή η μέθοδος θα μετατρέψει τα δεδομένα JSON και θα τα εξαγάγει σε ένα αρχείο XLSX το οποίο μπορείτε στη συνέχεια να κάνετε προεπισκόπηση στο Excel.

Αυτή η λειτουργία είναι πλέον διαθέσιμη για χρήση σε οποιοδήποτε μέρος της Angular εφαρμογής σας και μπορείτε εύκολα να την προσθέσετε ως πρόγραμμα χειρισμού συμβάντων για Κάντε κλικ εκδήλωση ή χρησιμοποιήστε το με οποιονδήποτε άλλο κατάλληλο τρόπο με βάση τις απαιτήσεις σας.

Μπορείτε να δείτε ένα παράδειγμα χρήσης αυτής της λειτουργικότητας στην παρακάτω εικόνα. Τα δεδομένα JSON από ένα εξωτερικό API αποδίδονται στη σελίδα, με ένα κουμπί για Εξαγωγή δεδομένων στο Excel:

Όταν κάνετε κλικ στο Εξαγωγή δεδομένων στο Excel κουμπί, το πρόγραμμα περιήγησής σας θα κατεβάσει το αρχείο Excel. Οταν εσύ ανοίξτε το αρχείο XLSX, το αρχείο υπολογιστικού φύλλου εξόδου μοιάζει με αυτό:

Η βιβλιοθήκη Xlsx μπορεί να κάνει πολλά περισσότερα από τη μετατροπή JSON σε μορφή Excel. Προσφέρει μια ισχυρή βιβλιοθήκη και υποστηρίζει διάφορες μορφές αρχείων που μπορεί να συναντήσετε στην επιχείρηση. Ελέγξτε το Τεκμηρίωση της βιβλιοθήκης Xlsx στο npm για να μάθετε περισσότερα για αυτό.

Μετατροπή δεδομένων από JSON σε υπολογιστικά φύλλα Excel σε Angular

Μπορείτε να χρησιμοποιήσετε τη βιβλιοθήκη Xlsx για να χειριστείτε εύκολα υπολογιστικά φύλλα Excel στην εφαρμογή Ιστού σας. Τα βήματα που πραγματοποιήσατε εδώ σάς επιτρέπουν να μετατρέψετε τα δεδομένα JSON από ένα API σε ένα καλά οργανωμένο υπολογιστικό φύλλο Excel. Μπορείτε επίσης να μετατρέψετε τα δεδομένα του Excel σε JSON χρησιμοποιώντας άλλες λειτουργίες της βιβλιοθήκης.

Ένας καλός τρόπος για να εξασκηθείτε στη χρήση αυτής της βιβλιοθήκης είναι να δημιουργήσετε μια εφαρμογή που δημιουργεί εβδομαδιαίες ή μηνιαίες αναφορές από ένα API και τις οργανώνει ως δεδομένα Excel.