Hoy traigo la manera mas sencilla para exportar tablas de Angular Material a archivos con extensión .xlsx .csv .json y .txt haciendo uso de mat-table-exporter.
Instalando Angular Material y mat-table-exporter
En nuestro proyecto vamos a instalar las siguientes dependencias, con el fin de tener en nuestro proyecto Angular Material y mat-table-exporter
ng add @angular/material
Para versiones de Angular 8 e inferiores vamos a usar esta versión de mat-table-exporter:
npm install –save mat-table-exporter@1.2.5
Para versiones de Angular 9 y superiores:
npm install –save mat-table-exporter
Luego de haber descargado las dependencias vamos a crear un componente para nuestra tabla, en mi caso como soy tan creativo le nombre “table”
ng g c components/table
Nos dirigimos a app.module donde vamos a importar los módulos MatTableModule, MatButtonModule y MatTableExporterModule
Vamos a crear un modelo para la tabla:
ng g i models/table
Para el modelo vamos a usar la tabla que viene en la documentación de material, en la interfaz generada table.model.ts voy a colocar lo siguiente:
export interface TableModel {
name: string;
position: number;
weight: number;
symbol: string;
}
Creando el datasource de la tabla
En nuestro archivo table.component.ts lo primero que voy a hacer es crear un arreglo de datos que sea del tipo del modelo de mi tabla:
elementData: TableModel[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];Luego creamos una variable para las columnas y otra que va a ser nuestro datasource:
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = this.elementData;
A continuación vamos a crear el html para la tabla, en el archivo table.component.html
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>Ejecutamos ng -serve y deberíamos ver en el navegador una tabla de Angular Material
Agregando mat-table-exporter
En la cabecera de nuestra tabla vamos a colocar matTableExporter #exporter=”matTableExporter”
<!---------- ANTES ---------->
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--------- AHORA ------->
<mat-table [dataSource]="dataSource" class="mat-elevation-z8"
matTableExporter #exporter="matTableExporter">Creamos 4 botones, cada uno me va a permitir exportar a un tipo de archivo diferente, los coloco debajo de donde se termina la tabla
</mat-table>
<button mat-raised-button color="primary"
(click)="exporter.exportTable('xlsx', {fileName:'table'})">Export to xlsx</button>
<button id="export" mat-raised-button color="primary"
(click)="exporter.exportTable('csv')">Export To csv</button>
<button id="export" mat-raised-button color="primary"
(click)="exporter.exportTable('json')">Export To json</button>
<button id="export" mat-raised-button color="primary"
(click)="exporter.exportTable('txt')">Export To txt</button>por defecto el nombre del archivo es mat-table-exporter, si lo queremos cambiar debemos utilizar la propiedad fileName: ‘nombredelarchivo’ en el metodo exportTable
<button mat-raised-button color="primary"
(click)="exporter.exportTable('xlsx', {fileName:'table'})">Export to xlsx</button>mat-table-exporter permite exportar unicamente a estos tipos de archivos:
- xls
- xlsx
- csv
- txt
- json
Nuestro archivo html se vería de la siguiente manera:
<mat-table [dataSource]="dataSource" class="mat-elevation-z8" matTableExporter
#exporter="matTableExporter">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<button mat-raised-button color="primary"
(click)="exporter.exportTable('xlsx', {fileName:'table'})">Export to xlsx</button>
<button id="export" mat-raised-button color="primary"
(click)="exporter.exportTable('csv')">Export To csv</button>
<button id="export" mat-raised-button color="primary"
(click)="exporter.exportTable('json')">Export To json</button>
<button id="export" mat-raised-button color="primary"
(click)="exporter.exportTable('txt')">Export To txt</button>Ahora probamos, lanzamos nuestra aplicación (ng serve)
Eso es todo, agradezco cualquier comentario, o si tienes dudas déjala en la caja de comentarios.
Si quieres ver este tutorial en video
No directive found with exportAs ‘matTableExporter’
Need to export the module in your app.module.ts
npm install –save mat-table-exporter esta mal, es
npm install –save mat-table-exporter , es por el Guin antes de save
Muchas gracias!
Me estaba volviendo loco adaptando dataTable con jQuery