Exportar Tablas en Angular Material: Comparativa Entre ngx-export-as y xlsx + file-save para Excel, PDF y más

npm install ngx-export-as

npm install xlsx file-saver

import { ExportAsModule } from 'ngx-export-as';

@NgModule({
  imports: [
    ...,
    ExportAsModule,
  ]
})
export class AppModule {}

@Component({
  selector: 'app-root',
  imports: [
    ExportAsModule,
    MatPaginatorModule,
    MatTableModule,
    MatButtonModule,
  ],
  providers: [
    PersonaService,
    ExportServiceNgxService,
    ExcelService
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

ng add @angular/material

export interface Persona {
  id: number;
  nombre: string;
  edad: number;
  email: string;
}

import { Injectable } from '@angular/core';
import { Persona } from './persona.model';

@Injectable({ providedIn: 'root' })
export class DataService {
  generarPersonas(cantidad: number = 200): Persona[] {
    const personas: Persona[] = [];
    for (let i = 1; i <= cantidad; i++) {
      personas.push({
        id: i,
        nombre: `Persona ${i}`,
        edad: 18 + (i % 50),
        email: `persona${i}@ejemplo.com`,
      });
    }
    return personas;
  }
}

import { Injectable } from '@angular/core';
import {ExportAsService} from 'ngx-export-as';

@Injectable({
  providedIn: 'root'
})
export class ExportNgxService {

  constructor(private exportAsService: ExportAsService) { }

  exportar(tipo: 'pdf' | 'xls' | 'png', elementId: string, nombreArchivo: string): void {
    const config = {
      type: tipo,
      elementIdOrContent: elementId,
      download: true
    };
    this.exportAsService.save(config, nombreArchivo).subscribe(() => {
      console.log(`Exportado como  ${tipo}`);
    })
  }
}

import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';
import * as FileSaver from 'file-saver';

@Injectable({
  providedIn: 'root'
})
export class ExcelService<T> {

  exportarExcel(data: T[], nombreArchivo: string):void{
    const worksheet = XLSX.utils.json_to_sheet(data);
    const workbook = { Sheets: {data: worksheet}, SheetNames: ['data']}
    const buffer = XLSX.write(workbook, {bookType: 'xlsx', type: 'array'});
    const blob = new Blob([buffer], {type: 'application/octet-stream'});
    FileSaver.saveAs(blob, `${nombreArchivo}.xlsx`);
  }
}

import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {ExportAsModule} from 'ngx-export-as';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import {Persona} from './models/persona';
import {ExportNgxService} from './services/export-ngx.service';
import {ExcelService} from './services/excel.service';
import {PersonaService} from './services/persona.service';
import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
import {MatButtonModule} from '@angular/material/button';

@Component({
  selector: 'app-root',
  imports: [
    ExportAsModule,
    MatPaginatorModule,
    MatTableModule,
    MatButtonModule,
  ],
  providers: [
    PersonaService,
    ExportNgxService,
    ExcelService
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit {
  title = 'export-example-angular';

  columnas: string[] = ['id', 'nombre', 'edad', 'email'];
  dataSource = new MatTableDataSource<Persona>()

  @ViewChild(MatPaginator) paginator !: MatPaginator

  constructor(
    private personaService: PersonaService,
    private exportServiceNgx: ExportNgxService,
    private excelService: ExcelService<Persona>) {
    this.dataSource.data = this.personaService.generarPersonas();
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
  }

  exportarNgx(tipo: 'pdf' | 'xls' | 'png'): void {
    this.exportServiceNgx.exportar(tipo, 'tablaExportar', 'tabla-personas');
  }

  exportarExcelXlsx(): void {
    this.excelService.exportarExcel(this.dataSource.filteredData, 'personas')
  }

}

<div>
  <button mat-raised-button color="primary" (click)="exportarNgx('pdf')">
    Exportar PDF (ngx-export-as)
  </button>

  <button mat-raised-button color="accent" (click)="exportarExcelXlsx()">
    Exportar Excel (xlsx)
  </button>
</div>

<div>
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id="tablaExportar">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let persona">{{persona.id}}</td>
      </ng-container>

    <ng-container matColumnDef="nombre">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Nombre </th>
      <td mat-cell *matCellDef="let persona"> {{ persona.nombre }} </td>
    </ng-container>

    <ng-container matColumnDef="edad">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Edad </th>
      <td mat-cell *matCellDef="let persona"> {{ persona.edad }} </td>
    </ng-container>

    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> Email </th>
      <td mat-cell *matCellDef="let persona"> {{ persona.email }} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnas"></tr>
    <tr mat-row *matRowDef="let row; columns: columnas;"></tr>
  </table>

  <mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>
</div>