如何将 Angular Material Table 导出为 excel 或 pdf 或 csv

Question

我正在使用 angular material https://material.angular.io/components/table/overview 中的示例创建 angular table 是否可以将其导出为 excel 或 pdf？

Answer 1

在你的tablecomponent.ts

声明一个名为 renderedData: any;

然后在您的构造函数中订阅已在您的material table 中更改的数据。我猜你正在使用可过滤的 table.

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

希望对您有所帮助:)

Answer 2

您可以使用 ngx-csv Angular 7 工作正常“https://www.npmjs.com/package/ngx-csv。” 从 table 获取数据 "this.dataSource.connect().subscribe(data=>this.renderedData=data);" 然后使用导出功能。

Answer 3

您可以使用 mat-table-exporter 包以 excel、csv、json 或 txt 格式导出。它也支持分页表格。

Stackblitz 演示： https://stackblitz.com/edit/mte-demo

Answer 4

您可以使用 mat-table-exporter。要访问打字稿代码中的“导出”方法：

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

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

Answer 5

不使用任何库都可以完成。对于动态功能，请勿将 html 元素转换为 csv。比如，如果想实现分页等等，那么可以这样实现：

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();
}

如何将 Angular Material Table 导出为 excel 或 pdf 或 csv

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

typescript

angular

angular-material-5