Экспорт Kendo PDF для Angular: как экспортировать сетку пользовательского интерфейса Kendo в PDF в приложениях Angular

Чтобы экспортировать Kendo UI Grid в PDF в приложении Angular, вы можете выполнить следующие действия:

  1. Установите необходимые зависимости:

    npm install @progress/kendo-angular-pdf-export --save
  2. Импортируйте необходимые модули в файл модуля Angular (например, app.module.ts):

    import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
    @NgModule({
     imports: [
       // other imports
       PDFExportModule
     ],
     // ...
    })
    export class AppModule { }
  3. Используйте компонент kendo-pdf-exportв шаблоне компонента Angular:

    <kendo-pdf-export #pdfExport>
     <!-- Your Kendo UI Grid here -->
     <kendo-grid [data]="gridData" [columns]="gridColumns"></kendo-grid>
    </kendo-pdf-export>
    <button (click)="exportToPDF()">Export to PDF</button>
  4. В файле компонента Angular (например, app.comComponent.ts) определите необходимые переменные и методы:

    import { Component, ViewChild } from '@angular/core';
    import { PDFExportComponent } from '@progress/kendo-angular-pdf-export';
    @Component({
     // component properties
    })
    export class AppComponent {
     @ViewChild('pdfExport', { static: false }) pdfExport: PDFExportComponent;
     gridData: any[]; // your grid data
     gridColumns: any[]; // your grid columns
     exportToPDF() {
       this.pdfExport.save();
     }
    }

При нажатии кнопки «Экспорт в PDF» сетка пользовательского интерфейса Kendo будет экспортирована в файл PDF.