Export PDF from ngx datatable using angular 2

6.2k views Asked by At

I am trying to do export pdf displayed by ngxdatable in Angular 2. How to do it?

1

There are 1 answers

1
Alex Beugnet On

There is a way actually...

  • The issue is to export only what you filtered, so the thing is to keep track of the filtered datas of your table.

I've been using an external library to be able to export documents from my Angular4 app : https://github.com/eligrey/FileSaver.js/

Here is the sample code I used to extract my data. I binded this method to a button to trigger the event :

TypeScript component :

  // Notice the parameters from the service call that give me back my filtered datas
  exportDatas(documentType: string) {
    this.equipmentService.getExportDatas(this.detail.equipment.id, this.beginDate, this.endDate, this.frameType, documentType, this.timezoneOffset, this.translateService.currentLang)
    .subscribe(result => {
      const blob = new Blob([result.blob()]);
      const objectUrl = URL.createObjectURL(blob);
      FileSaver.saveAs(blob, 'Export.' + documentType);
    });
  }

Template side :

<div fxLayoutAlign="end">
  <span class="label">{{'EQP_HISTORY.EXPORT'|translate}} :</span>
  <button (click)="exportDatas('csv')" type="button">CSV</button>
  <button (click)="exportDatas('pdf')" type="button">PDF</button>
</div>