Exporter des données vers Excel en Angular

Cet article explique comment exporter des données vers Excel dans Angular.

Exporter des données vers Excel en Angular

Il existe de nombreuses situations dans lesquelles nous pouvons avoir besoin d’utiliser une fonction d’exportation dans notre application Angular. Nous pouvons vouloir donner une option sous forme de bouton sur notre application pour que les clients ou les clients exportent les données des tableaux vers des feuilles Excel ou de JSON vers des feuilles Excel.

Ce tutoriel discutera de l’exportation des données de notre application au format Excel avec des exemples. À cette fin, nous pouvons utiliser la bibliothèque xlsx dans Angular, qui nous donne la possibilité de convertir les données JSON au format Excel.

Passons en revue un exemple dans lequel nous allons créer des données JSON des saisons météorologiques de l’année. Nous devons d’abord installer Angular CLI dans notre système.

Tout d’abord, nous allons créer un nouveau projet sur Angular en exécutant la commande suivante dans la ligne de commande.

ng new angular-app

Une fois notre nouvelle application créée avec succès, nous irons dans notre dossier d’application à l’aide de la commande suivante.

cd ./angular-app

Nous allons installer la librairie xlsx en utilisant le module npm. Nous utiliserons la commande suivante pour l’installer.

npm i xlsx --save

Nous allons maintenant créer une liste fictive des saisons météorologiques sur une année. Nous créons nos données JSON factices dans cet exemple, mais elles peuvent être récupérées via une base de données ou certaines API.

Les données factices sont présentées ci-dessous.

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"}]

Maintenant, nous allons créer l’application frontale dans laquelle nous allons créer la table qui affichera les données JSON. Le code mis à jour dans le fichier app.component.html est présenté ci-dessous.

<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>

Nous allons maintenant créer une fonction dans le fichier app.component.ts pour exporter les données au format Excel, comme indiqué ci-dessous.

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);
  }
}

Comme indiqué ci-dessous, nous ajouterons du code CSS pour que notre frontal soit beau.

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

Maintenant, nous allons exécuter l’application avec la commande ci-dessous.

npm start

Production:

Maintenant, cliquons sur le bouton export et vérifions si le programme fonctionne. Lorsque nous cliquons sur le bouton, il télécharge le fichier avec le nom que nous avons enregistré, comme indiqué ci-dessous.

Maintenant, ouvrons ce fichier et vérifions à quoi il ressemble, comme indiqué ci-dessous.