Search code examples
angulartypescriptangular-material-5

How to export Angular Material Table to excel or pdf or csv

i am creating an angular table using this example from angular material https://material.angular.io/components/table/overview is there anyway to export it in excel or pdf?

Solution

  • In your table component.ts

    declare a value called renderedData: any;

    Then in your constructor subscribe to the data that has been changed in your material table. I am guessing you are using a filterable table.

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

    npm install --save angular5-csv

    In your HTML create a button <button class="btn btn-primary" (click)="exportCsv()">Export to CSV</button>

    Finally, export the changed data to a CSV

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

    More details about the exporter can be found here: https://www.npmjs.com/package/angular5-csv

    I hope this helps :)