如何使用 angular 7 中的外部按钮将数据导出到 Kendo 网格中的 Excel？

Question

我正在尝试通过外部按钮从 kendo 网格数据下载 excel 文件 -- 不使用 kendo excel 工具栏。

作为 angular 本身的新手，我用谷歌搜索从外部按钮下载，但我没有找到任何详细信息

 <div class="grid-wrapper" *ngIf="!recordsNotFound">


 <kendo-grid [data]="gridView" [pageSize]="pageSize" [resizable]="true" id="dataEntry"
          [skip]="skip"
          [pageable]="true"
          [selectable]="true"
          [sortable]="true"
          (sortChange)="sortChange($event)"
          (selectionChange)="onSelection($event)"
          (pageChange)="pageChange($event)">
<kendo-grid-messages noRecords="">
</kendo-grid-messages>
<kendo-grid-column *ngFor="let column of columns"
                   field="{{column.field}}"
                   title="{{column.title}}"
                   format="{{column.format}}"
                   width="100"
                   media="(min-width: 320px)"
                   hidden="{{column.isHidden}}"
                   filter="{{column.type}}"></kendo-grid-column>

<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>

  <kendo-pager-info></kendo-pager-info>
  <kendo-pager-next-buttons></kendo-pager-next-buttons>

</ng-template>

Answer 1

您可以尝试这样的操作：

首先，您在模板中添加一个按钮，然后使用 # 符号添加对网格组件的引用：

<p>
   <button (click)="exportToExcel(grid)">Export Grid to Excel...</button>
</p>
<kendo-grid #grid="kendoGrid" ... >

然后在 .ts 文件中添加方法 exportToExcel：

public exportToExcel(grid: GridComponent): void {
  grid.saveAsExcel();
}

也可以在 Kendo 网站上找到 Angular 网格文档： Trigger Export Externally.

如何使用 angular 7 中的外部按钮将数据导出到 Kendo 网格中的 Excel？

How to Export data to Excel in Kendo Grid with external button in angular 7?

export-to-excel

typescript

kendo-grid

angular

angular7