为 p-table 导出提供自定义文件名

Question

我在我的角度应用程序中使用primeng 表。我正在尝试在用户导出表格内容时将导出的 csv 文件附加到当前时间。但是，我第一次导出时，文件名没有随着时间而更新。下次它可以工作，但文件名会附加上一次。我的猜测是导出文件名使用的是旧文件名而不是更新文件名。不知道为什么会这样。我在导出时调用了 setFile 方法。它应该采用更新的文件名。请帮助。在此先感谢。

这是我的模板代码：

<p-table [columns]="cols" #dt [value]="students" [autoLayout]="true"  exportFilename={{testFileName}}>
        <ng-template pTemplate="caption">
            <div >
                <button  mat-icon-button type="button" (click)="setFileName();dt.exportCSV()" style="float:right"><mat-icon>save_alt</mat-icon></button>
            </div>
        </ng-template>
    </p-table>

我的打字稿：

  students: any[];
  cols: any[];

  testFileName = 'SampleFile';
  constructor(private studentService: StudentService) { }

  ngOnInit() {
    this.studentService.getAllStudents().subscribe(data => this.students = data);

    this.cols = [
      { field: 'name', header: 'Name' },
      { field: 'rollNo', header: 'RollNo' },
      { field: 'class', header: 'Class' },
    ];
  }



setFileName() {
    this.testFileName = 'StudentDetailsExport' + '_' +
      new DatePipe('en-US').transform(Date.now(), 'MMM_dd_yyyy_hh_mm_ss', 'UTC') + 'Z';

  }

Answer 1

获取元素引用

@ViewChild('dt') dt: Table;

并使用 this.dt.exportFileName 设置文件名，然后使用 dt.exportCSV() 导出。

setFileName() {
    this.dt.exportFileName = 'StudentDetailsExport' + '_' +
      new DatePipe('en-US').transform(Date.now(), 'MMM_dd_yyyy_hh_mm_ss', 'UTC') + 'Z';
   this.dt.exportCSV();
  }

HTML - 只调用 setFileName() 函数

<button  mat-icon-button type="button" (click)="setFileName()"></button>

Stackblitz:https://stackblitz.com/edit/angular-ptable-io6vjb