web-dev-qa-db-ja.com

Angular材料表をExcelまたはpdfまたはcsvにエクスポートする方法

angular material からこの例を使用してangularテーブルを作成しています（https://material.angular.io/components/table）/overview とにかくそれをExcelまたはpdfにエクスポートしますか？

angulartypescriptangular-material-5
7
Kamran Mushtaq

テーブルのcomponent.ts

_renderedData: any;_という値を宣言します

次に、コンストラクターで、マテリアルテーブルで変更されたデータをサブスクライブします。フィルター可能なテーブルを使用していると思います。

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

_npm install --save angular5-csv_

HTMLにボタンを作成します<button class="btn btn-primary" (click)="exportCsv()">Export to CSV</button>

最後に、変更されたデータをCSVにエクスポートします

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

エクスポーターの詳細については、こちらをご覧ください https://www.npmjs.com/package/angular5-csv

これが役に立てば幸いです:)

8
Kav Khalsa

mat-table-exporter パッケージを使用して、Excel、csv、json、txt形式でエクスポートできます。ページネーションされたテーブルもサポートします。

Stackblitzデモ： https://stackblitz.com/edit/mte-demo

5
talhature

Angular 7は正常に動作します " https://www.npmjs.com/package/ngx-csv 。"にはngx-csvを使用できます。 「this.dataSource.connect（）。subscribe（data => this.renderedData = data）;」を含むテーブルを作成し、エクスポート関数を使用します。

1
kristou Ahmed