CODEWITHSUNDEEP
angulartypescriptangular-material-5
Kamran Mushtaq
Kamran Mushtaq

Reputation: 183

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?

Upvotes: 14

Views: 36851

Answers (5)

talhature
talhature

Reputation: 2165

You can use my mat-table-exporter package to export in excel, csv, json or txt formats. It supports paginated tables too.

Stackblitz demo: https://stackblitz.com/edit/mte-demo

Upvotes: 11

H S W
H S W

Reputation: 7119

It can be done with out using any library. For dynamic functionality do not convert html element in to csv. Such as, If would like to implement pagination etc. Then It can be done as follow:

exportCsv(): void {
  let csv = '';
  for (let column = 0; column < this.columns.length; column++) {
    csv += this.columns[column] + ';';
    csv = csv.replace(/\n/g, '');
  }
  csv = csv.substring(0, csv.length - 1) + '\n';
  const rows = this.filterdRows;

  for (let row = 0; row < rows.length; row++) {
   for (let rowElement = 0; rowElement < rows[row].length; rowElement++) {
      csv += rows[row][rowElement] + ';';
   }
    csv = csv.substring(0, csv.length - 1) + '\n';
  }
  csv = csv.substring(0, csv.length - 1) + '\n';
  const docElement = document.createElement('a');
  const universalBOM = '\uFEFF';

  //You can edit the code for the file name according to your requirements
  let filename = this.filename + '_';
  filename = filename.concat(this.currentDateString.toString());
  const fileNameWithType = filename.concat('.csv');
  docElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(universalBOM + csv);
  docElement.target = '_blank';
  docElement.download = fileNameWithType;
  docElement.click();
}

Upvotes: 0

stlukas1
stlukas1

Reputation: 21

You can use mat-table-exporter. To access the "export" method in the typescript code:

@ViewChild("exporter") exporter! : MatTableExporterDirective;

<table mat-table matTableExporter [dataSource]="dataSource" 
                               #exporter="matTableExporter">

Upvotes: 2

kristou Ahmed
kristou Ahmed

Reputation: 11

You can use ngx-csv for Angular 7 works fine "https://www.npmjs.com/package/ngx-csv." Get the data from the table with "this.dataSource.connect().subscribe(data=>this.renderedData=data);" and then use export function.

Upvotes: 1

Kav Khalsa
Kav Khalsa

Reputation: 171

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 :)

Upvotes: 10

Related Questions