Exportieren Daten in Angular nach Excel

In diesem Artikel wird erläutert, wie Sie Daten in Angular nach Excel exportieren.

Daten nach Excel exportieren in Angular

Es gibt viele Situationen, in denen wir möglicherweise eine Exportfunktion in unserer Angular-Anwendung verwenden müssen. Wir möchten möglicherweise eine Option als Schaltfläche in unserer Anwendung für Kunden oder Klienten bereitstellen, um die Daten aus Tabellen in Excel-Tabellen oder von JSON in Excel-Tabellen zu exportieren.

In diesem Tutorial wird das Exportieren der Daten aus unserer Anwendung in das Excel-Format anhand von Beispielen erläutert. Dazu können wir die xlsx-Bibliothek in Angular verwenden, die uns die Möglichkeit gibt, JSON-Daten in das Excel-Format zu konvertieren.

Lassen Sie uns ein Beispiel durchgehen, in dem wir JSON-Daten der Wettersaisonen im Jahr erstellen. Wir müssen zuerst Angular CLI in unserem System installieren.

Zuerst erstellen wir ein neues Projekt auf Angular, indem wir den folgenden Befehl in der Befehlszeile ausführen.

ng new angular-app

Sobald unsere neue Anwendung erfolgreich erstellt wurde, wechseln wir mit Hilfe des folgenden Befehls zu unserem Anwendungsordner.

cd ./angular-app

Wir werden die Bibliothek xlsx mit dem Modul npm installieren. Wir werden den folgenden Befehl verwenden, um es zu installieren.

npm i xlsx --save

Jetzt erstellen wir eine Dummy-Liste der Wetterjahreszeiten in einem Jahr. Wir erstellen unsere Dummy-JSON-Daten in diesem Beispiel, aber sie können über eine Datenbank oder einige APIs abgerufen werden.

Die Dummy-Daten sind unten gezeigt.

Seasons = [
{ 	"id": 1,
	"name": "Spring",
	"Fruit": "Orange" },
{	"id": 2,
	"name": "Summer",
	"Fruit": "Mango"},
{	"id": 3,
	"name": "Winter",
	"Fruit": "Apple"},
{	"id": 4,
	"name": "Autumn",
	"Fruit": "Banana"}]

Jetzt erstellen wir die Frontend-Anwendung, in der wir die Tabelle erstellen, die die JSON-Daten anzeigt. Der aktualisierte Code in der Datei app.component.html ist unten dargestellt.

<div>
  <button (click)="exportToExcel()">Export to Excel</button>
  <table id="season-tble">
    <tr>
      <th>Id</th>
      <th>name</th>
      <th>Fruit</th>
    </tr>
    <tr *ngFor="let season of Seasons">
      <td>{{ season.id }}</td>
      <td>{{ season.name }}</td>
      <td>{{ season.fruit }}</td>
    </tr>
  </table>
</div>

Jetzt erstellen wir eine Funktion in der Datei app.component.ts, um Daten in das Excel-Format zu exportieren, wie unten gezeigt.

import { Component, VERSION } from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  Seasons = [
    { id: 1, name: 'Spring', fruit: 'Orange' },
    { id: 2, name: 'Summer', fruit: 'Mango' },
    { id: 3, name: 'Winter', fruit: 'Apple' },
    { id: 4, name: 'Autumn', fruit: 'Banana' },
  ];

  name = 'ExcelSheet.xlsx';
  exportToExcel(): void {
    let element = document.getElementById('season-tble');
    const worksheet: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);

    const book: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(book, worksheet, 'Sheet1');

    XLSX.writeFile(book, this.name);
  }
}

Wie unten gezeigt, werden wir etwas CSS-Code hinzufügen, damit unser Frontend gut aussieht.

td{
  border: 1px solid black;
  padding: 10px;
}
button{
  background: black;
  padding: 10px;
  color: white;
  margin-bottom: 50px;
}

Jetzt führen wir die Anwendung mit dem unten gezeigten Befehl aus.

npm start

Ausgabe:

Jetzt klicken wir auf den export-Button und prüfen, ob das Programm funktioniert. Wenn wir auf die Schaltfläche klicken, wird die Datei mit dem von uns gespeicherten Namen heruntergeladen, wie unten gezeigt.

Lassen Sie uns nun diese Datei öffnen und prüfen, wie sie aussieht, wie unten gezeigt.