[SOLVED] How to export Angular Material Table to excel or pdf or csv

Issue

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 🙂

Answered By – Kav Khalsa

Answer Checked By – Terry (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *