web-dev-qa-db-fra.com

Comment exporter Angular Material Table vers Excel ou pdf ou csv

je crée un angular en utilisant cet exemple de angular https://material.angular.io/components/table/overview existe-t-il de toute façon de l'exporter en Excel ou pdf?

angulartypescriptangular-material-5
7
Kamran Mushtaq

Dans votre table component.ts

déclarer une valeur appelée renderedData: any;

Ensuite, dans votre constructeur, abonnez-vous aux données qui ont été modifiées dans votre table de matériaux. Je suppose que vous utilisez une table filtrable.

constructor(){
this.dataSource = new MatTableDataSource(TableData);
this.dataSource.connect().subscribe(d => this.renderedData = d);
}

npm install --save angular5-csv

Dans votre HTML créez un bouton <button class="btn btn-primary" (click)="exportCsv()">Export to CSV</button>

Enfin, exportez les données modifiées vers un CSV

exportCsv(){
new Angular5Csv(this.renderedData,'Test Report');
}

Plus de détails sur l'exportateur peuvent être trouvés ici: https://www.npmjs.com/package/angular5-csv

J'espère que ça aide :)

8
Kav Khalsa

Vous pouvez utiliser mat-table-exporter package pour exporter aux formats Excel, csv, json ou txt. Il prend également en charge les tableaux paginés.

Démo Stackblitz: https://stackblitz.com/edit/mte-demo

5
talhature

Vous pouvez utiliser ngx-csv pour Angular 7 fonctionne très bien " https://www.npmjs.com/package/ngx-csv ." Obtenez les données du table avec "this.dataSource.connect (). subscribe (data => this.renderedData = data);" puis utilisez la fonction d'exportation.

1
kristou Ahmed