Jak przekonwertować dane JSON na arkusz kalkulacyjny Excel za pomocą Angular

Jako programista jesteś otwarty na codzienne stawianie czoła nowym wyzwaniom w różnych projektach, nad którymi pracujesz. Aplikacje internetowe czasami muszą wykonywać dodatkowe zadania, aby osiągnąć różne cele w zależności od wymagań biznesowych lub technicznych.

Może być konieczne zebranie danych z interfejsu API i przetworzenie ich w innym formacie, takim jak PDF, XML, DOCX lub XLSX.

W tym przewodniku dowiesz się, jak przekształcić dane JSON otrzymane z odpowiedzi API w dobrze zorganizowany arkusz kalkulacyjny Excel w Twojej aplikacji Angular.

Co to jest biblioteka XLSX?

Biblioteka Xlsx jest skutecznym zasobem dla programistów Angular, którzy chcą przekształcić dane JSON z odpowiedzi API w zgrabny arkusz kalkulacyjny Excel. Za pomocą tego modułu programiści mogą szybko pobierać i modyfikować dane JSON.

Możesz użyć biblioteki Xlsx do tworzenia raportów dla swojego zespołu lub prezentowania danych w nowy sposób. Jeśli chcesz szybko i łatwo zarządzać swoimi danymi w aplikacjach JavaScript, jest to dobra opcja.

Jak skonfigurować bibliotekę XLSX za pomocą aplikacji Angular

Zanim zaczniesz korzystać z biblioteki Xlsx w swojej aplikacji Angular, ważne jest, aby mieć skonfigurowane środowisko programistyczne Node.js i Angular na swoim komputerze. Po zainstalowaniu Node.js Angular jest łatwy do skonfigurowania przez uruchomienie npm install -g @angular/cli w terminalu.

Utwórz nowy projekt Angular, uruchamiając ng new [nazwa-twojej-kątowej-aplikacji] w terminalu. Następnie przejdź do katalogu projektu, jak pokazano poniżej:

Możesz także uruchomić lokalny serwer programistyczny, uruchamiając ng służyć --o, która umożliwia przeglądanie aplikacji Angular i wprowadzonych w niej zmian na żywo w przeglądarce.

Po skonfigurowaniu aplikacji Angular instalacja biblioteki Xlsx to prosty proces, który można ukończyć po prostu uruchamiając npm zainstaluj xlsx --zapisz. To polecenie zainstaluje zależności potrzebne do korzystania z biblioteki Xlsx.

Jak przekonwertować dane JSON do formatu XLSX w Angular

Dzięki Angular CLI możesz wygenerować nową usługę, uruchamiając plik ng generuj usługę [nazwa usługi] polecenie w terminalu. Na przykład w tym przypadku możesz wygenerować potrzebną usługę Excel generowanie usługi ExcelService.

Ten Generować polecenie utworzy plik usługi: ExcelService.service.ts, w źródło/aplikacja katalog projektu. Plik wygląda domyślnie tak:

import { Do wstrzykiwań } z„@kątowy/rdzeń”; 
@Do wstrzykiwań({ opatrzony w: 'źródło' }) 
eksportklasaExcelServiceService{
konstruktor() { } 
}

Ten ExcelService plik obsłuży funkcjonalność eksportu danych do formatu Excel. Zaktualizuj ExcelService.service.ts plik, aby wyglądał jak poniższy kod:

import { Do wstrzykiwań } z„@kątowy/rdzeń”; 
import * Jak XLSX z'xlsx'; 
konst EXCEL_EXTENSION = '.xlsx'; // rozszerzenie pliku Excela
@Do wstrzykiwań({ opatrzony w: 'źródło' }) 
eksportklasaExcelServiceService{ 
konstruktor () { }
publicznyEksport do Excela(element: dowolny, nazwa_pliku: ciąg znaków): próżnia{
// wygeneruj skoroszyt i dodaj arkusz
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_arkusz (element);
konst skoroszyt: XLSX.WorkBook = XLSX.utils.book_new(); 
// Zapisz do pliku
 XLSX.utils.book_append_sheet (skoroszyt, ws, „Arkusz1”);
 XLSX.writeFile (skoroszyt, ${nazwa_pliku}${EXCEL_EXTENSION}); 
 }
}

W powyższym kodzie importujesz plik Xlsx bibliotekę i utworzyć stałą zmienną, EXCEL_EXTENSION do przechowywania rozszerzenia pliku Excel.

The Eksport do Excela metoda przyjmuje dwa parametry: element I Nazwa pliku. Parametr element reprezentuje dane do wyeksportowania do pliku Excel, podczas gdy parametr Nazwa pliku parametrem jest nazwa pliku programu Excel.

Aby wyeksportować dane do pliku Excel, utwórz arkusz kalkulacyjny za pomocą json_do_arkusza Metoda biblioteki Xlsx. Utwórz także skoroszyt, korzystając z biblioteki książka_nowa metoda.

Następnie dodaj arkusz do skoroszytu za pomocą book_append_sheet metoda i zapisz ją w pliku za pomocą napisz plik.

Wcześniej utworzyłeś usługę Excel, aby ułatwić proces pobierania i konwertowania danych JSON do arkusza Excel. Aby skorzystać z tej usługi, musisz utwórz odpowiedni komponent Angular i zaimportuj do niego plik usługi.

import { Usługa Excel } z'./usługa.excel';

Następnie musisz wstrzyknąć go do konstruktora komponentu w następujący sposób:

konstruktor(prywatna usługa ExcelService: ExcelService) { 
... 
}

Następnie możesz przejść do implementacji funkcji (eksportExcel), gdzie będziesz używać Eksport do Excela metoda eksportu JSON do Excela. Poniższy kod pokazuje, jak to zrobić.

eksportExcel(): próżnia { 
konst plikDoEksportu = Ten.apiJsonResponseData.map((pozycje: dowolne) => { 
powrót {
"Identyfikator użytkownika": elementy?.identyfikator użytkownika,
"ID": elementy?.id,
"Tytuł": elementy?.tytuł,
"Ciało": przedmioty?.ciało
 } 
 });
Ten.excelService.Eksport do Excela(
 plikDoEksportu,
„twój plik programu Excel-” + nowyData().getTime() + '.xlsx'
 );
}

W powyższym kodzie zdefiniowałeś plik eksportExcel sposób wywołania Eksport do Excela metoda tzw ExcelService. Nowa zmienna, plikDoEksportu, przechowuje dane do wyeksportowania. The apiJsonResponseData tablica zawiera dane JSON uzyskane z odpowiedzi API.

Następnie, Eksport do Excela metoda tzw excelService bierze plikDoEksportu i twój preferowany Nazwa pliku. Zwróć uwagę, jak możesz dołączyć bieżący znacznik czasu do nazwy pliku, aby upewnić się, że jest unikalny. Ta metoda przekonwertuje dane JSON i wyeksportuje je do pliku XLSX, który można następnie wyświetlić w programie Excel.

Ta funkcja jest teraz dostępna do użycia w dowolnej części aplikacji Angular i możesz łatwo dodać ją jako obsługę zdarzeń dla Kliknij zdarzenia lub używać go w jakikolwiek inny odpowiedni sposób w oparciu o Twoje wymagania.

Możesz zobaczyć przykładowe użycie tej funkcjonalności na obrazku poniżej. Dane JSON z zewnętrznego interfejsu API są renderowane na stronie z przyciskiem do Eksportuj dane do Excela:

Kiedy klikniesz Eksportuj dane do Excela przycisk, przeglądarka pobierze plik Excel. Kiedy ty otwórz plik XLSX, wyjściowy plik arkusza kalkulacyjnego wygląda następująco:

Biblioteka Xlsx potrafi o wiele więcej niż konwersja formatu JSON do formatu Excel. Oferuje solidną bibliotekę i obsługuje różne formaty plików, które możesz napotkać w biznesie. Sprawdź Dokumentacja biblioteki Xlsx na temat npm aby dowiedzieć się więcej na ten temat.

Konwersja danych z JSON do arkuszy kalkulacyjnych Excel w Angular

Możesz użyć biblioteki Xlsx do łatwego manipulowania arkuszami kalkulacyjnymi Excel w swojej aplikacji internetowej. Czynności, które tutaj wykonałeś, pozwolą Ci przekształcić dane JSON z interfejsu API w dobrze zorganizowany arkusz kalkulacyjny Excel. Możesz także konwertować dane programu Excel z powrotem do formatu JSON przy użyciu innych funkcji w bibliotece.

Dobrym sposobem na ćwiczenie korzystania z tej biblioteki jest zbudowanie aplikacji, która generuje tygodniowe lub miesięczne raporty z interfejsu API i porządkuje je jako dane programu Excel.