Jak převést data JSON do tabulky Excel pomocí Angular

Jako vývojář jste otevřeni denně čelit novým výzvám v různých projektech, na kterých možná pracujete. Webové aplikace někdy musí provádět některé úkoly navíc, aby dosáhly různých cílů v závislosti na obchodních nebo technických požadavcích.

Možná budete muset shromáždit data z API a zpracovat je v jiném formátu, jako je PDF, XML, DOCX nebo XLSX.

V této příručce se dozvíte, jak převést data JSON přijatá z odpovědi API do dobře organizované tabulky Excel ve vaší aplikaci Angular.

Co je knihovna XLSX?

Knihovna Xlsx je efektivním zdrojem pro vývojáře Angular, kteří chtějí transformovat data JSON z odpovědi API do úhledné tabulky Excel. Pomocí tohoto modulu mohou vývojáři rychle stáhnout a upravit data JSON.

Knihovnu Xlsx můžete použít k vytváření sestav pro svůj tým nebo k prezentaci dat novými způsoby. Pokud chcete rychlý a snadný způsob správy dat v aplikacích JavaScript, je to dobrá volba.

Jak nakonfigurovat knihovnu XLSX pomocí aplikace Angular

Než začnete s knihovnou Xlsx ve vaší aplikaci Angular, je důležité mít na svém počítači nastavené vývojové prostředí Node.js a Angular. S nainstalovaným Node.js lze Angular snadno nastavit spuštěním npm install -g @angular/cli v terminálu.

Spuštěním vytvořte nový projekt Angular ng new [your-angular-app-name] v terminálu. Poté přejděte do adresáře projektu, jak je vidět níže:

Můžete také spustit místní vývojový server spuštěním ng sloužit --o, která vám umožní zobrazit vaši aplikaci Angular a změny v ní provedené živě v prohlížeči.

Po nastavení aplikace Angular je instalace knihovny Xlsx jednoduchý proces, který můžete dokončit jednoduše spuštěním npm install xlsx --uložit. Tento příkaz nainstaluje závislosti potřebné k použití knihovny Xlsx.

Jak převést data JSON do formátu XLSX v Angular

S Angular CLI můžete vygenerovat novou službu spuštěním generovat službu [název služby] příkaz v terminálu. V tomto případě můžete například vygenerovat službu Excel, kterou potřebujete generovat službu ExcelService.

Tento generovat příkaz vytvoří soubor služby: ExcelService.service.ts, v src/app adresář projektu. Soubor ve výchozím nastavení vypadá takto:

import { Injekční } z'@angular/core'; 
@Injekční({ poskytnuté v: 'vykořenit' }) 
vývoznítřídaSlužba ExcelService{
konstruktér() { } 
}

Tento ExcelService soubor zvládne funkci exportu dat do formátu Excel. Aktualizujte ExcelService.service.ts soubor vypadat jako kód níže:

import { Injekční } z'@angular/core'; 
import * tak jako XLSX z'xlsx'; 
konst EXCEL_EXTENSION = '.xlsx'; // přípona souboru Excel
@Injekční({ poskytnuté v: 'vykořenit' }) 
vývoznítřídaSlužba ExcelService{ 
konstruktér () { }
veřejnostexportovat do Excelu(element: any, fileName: string): prázdnota{
// vygenerujte sešit a přidejte list
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (prvek);
konst sešit: XLSX.Sešit = XLSX.utils.book_new(); 
// uložit do souboru
 XLSX.utils.book_append_sheet (sešit, ws, 'List1');
 XLSX.writeFile (sešit, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Ve výše uvedeném kódu importujete soubor Xlsx knihovnu a vytvořit konstantní proměnnou, EXCEL_EXTENSION pro uložení přípony souboru Excel.

The exportovat do Excelu metoda přijímá dva parametry: živel a název souboru. Parametr prvku představuje data, která se mají exportovat do souboru Excel, zatímco název souboru parametr je název souboru aplikace Excel.

Chcete-li exportovat data do souboru aplikace Excel, vytvořte list pomocí souboru json_to_sheet metoda knihovny Xlsx. Vytvořte také sešit pomocí knihovny book_new metoda.

Poté přidejte list do sešitu pomocí book_append_sheet a uložte jej do souboru pomocí writeFile.

Dříve jste vytvořili službu Excel pro usnadnění procesu stahování a převodu dat JSON na list aplikace Excel. Chcete-li tuto službu používat, musíte vytvořte příslušnou Angular komponentu a importujte do něj soubor služby.

import { ExcelService } z'./excel.service';

Dále jej musíte vložit do konstruktoru komponenty takto:

konstruktér(soukromá služba excelService: ExcelService) { 
... 
}

Poté můžete pokračovat v implementaci funkce (exportovat Excel), kde budete používat exportovat do Excelu způsob exportu JSON do Excelu. Níže uvedený kód ukazuje, jak to provést.

exportExcel(): prázdnota { 
konst fileToExport = tento.apiJsonResponseData.map((položky: jakékoli) => { 
vrátit se {
"Uživatelské ID": items?.userId,
"ID": položky?.id,
"Titul": položky?.title,
"Tělo": předměty?.tělo
 } 
 });
tento.excelService.exportToExcel(
 fileToExport,
'vášSoubor Excel-' + Novýdatum().getTime() + '.xlsx'
 );
}

Ve výše uvedeném kódu jste definovali exportovat Excel způsob volání exportovat do Excelu metoda ExcelService. Nová proměnná, fileToExport, ukládá data k exportu. The apiJsonResponseData pole obsahuje data JSON získaná z odpovědi API.

Následně se exportovat do Excelu metoda excelService bere fileToExport a vaše preferované název souboru. Všimněte si, jak můžete k názvu souboru připojit aktuální časové razítko, abyste zajistili jeho jedinečnost. Tato metoda převede data JSON a exportuje je do souboru XLSX, který si pak můžete prohlédnout v aplikaci Excel.

Tato funkce je nyní k dispozici pro použití v jakékoli části vaší aplikace Angular a můžete ji snadno přidat jako obsluhu události pro klikněte událost nebo jej použít jiným vhodným způsobem na základě vašich požadavků.

Příklad použití této funkce můžete vidět na obrázku níže. Data JSON z externího rozhraní API se vykreslují na stránce pomocí tlačítka Export dat do Excelu:

Když kliknete na Export dat do Excelu tlačítko, váš prohlížeč stáhne soubor Excel. Když vás otevřete soubor XLSX, výstupní soubor tabulky vypadá takto:

Knihovna Xlsx umí mnohem víc, než jen převádět JSON do formátu Excel. Nabízí robustní knihovnu a podporuje různé formáty souborů, se kterými se můžete v podnikání setkat. Podívejte se na Dokumentace knihovny Xlsx na npm abyste se o tom dozvěděli více.

Převod dat z JSON do tabulek Excelu v Angular

Knihovnu Xlsx můžete použít ke snadné manipulaci s tabulkami Excelu ve vaší webové aplikaci. Kroky, které jste zde provedli, vám umožní transformovat data JSON z rozhraní API do dobře organizované tabulky aplikace Excel. Data Excelu můžete také převést zpět na JSON pomocí dalších funkcí v knihovně.

Dobrým způsobem, jak si procvičit používání této knihovny, je vytvořit aplikaci, která generuje týdenní nebo měsíční zprávy z API a organizuje je jako data aplikace Excel.