Exportar datos a Excel en Angular

Este artículo discutirá cómo exportar datos a Excel en Angular.

Exportar datos a Excel en Angular

Hay muchas situaciones en las que podemos necesitar usar una función de exportación en nuestra aplicación Angular. Es posible que queramos dar una opción como botón en nuestra aplicación para que los clientes o clientes exporten los datos de tablas a hojas de Excel o de JSON a hojas de Excel.

Este tutorial analizará la exportación de datos de nuestra aplicación a formato Excel con ejemplos. Para ello podemos utilizar la librería xlsx en Angular, que nos da la opción de convertir datos JSON a formato Excel.

Veamos un ejemplo en el que crearemos datos JSON de las estaciones meteorológicas del año. Primero tenemos que instalar Angular CLI en nuestro sistema.

Primero, crearemos un nuevo proyecto en Angular ejecutando el siguiente comando en la línea de comandos.

ng new angular-app

Una vez creada con éxito nuestra nueva aplicación, iremos a nuestra carpeta de aplicaciones con la ayuda del siguiente comando.

cd ./angular-app

Instalaremos la librería xlsx utilizando el módulo npm. Usaremos el siguiente comando para instalarlo.

npm i xlsx --save

Ahora crearemos una lista ficticia de estaciones climáticas en un año. Creamos nuestros datos JSON ficticios en este ejemplo, pero se pueden obtener a través de una base de datos o algunas API.

Los datos ficticios se muestran a continuación.

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

Ahora, crearemos la aplicación frontend en la que crearemos la tabla que mostrará los datos JSON. El código actualizado en el archivo app.component.html se muestra a continuación.

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

Ahora crearemos una función en el archivo app.component.ts para exportar datos a formato Excel, como se muestra a continuación.

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

Como se muestra a continuación, agregaremos un código CSS para que nuestra interfaz se vea bien.

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

Ahora, ejecutaremos la aplicación con el comando que se muestra a continuación.

npm start

Producción:

Ahora hagamos clic en el botón export y comprobemos si el programa funciona. Cuando hacemos clic en el botón, se descargará el archivo con el nombre que guardamos, como se muestra a continuación.

Ahora, abramos este archivo y veamos cómo se ve, como se muestra a continuación.