Как экспортировать данные в Excel в Kendo Grid с помощью внешней кнопки в angular 7?

Я пытаюсь загрузить файл excel из данных сетки кендо с внешней кнопки, а не с панели инструментов кендо 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>

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
1 927
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать что-то вроде этого:

Сначала вы добавляете кнопку в свой шаблон и добавляете ссылку на компонент сетки с нотацией #:

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

Затем вы добавляете метод exportToExcel в свой файл .ts:

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

Это также доступно на веб-сайте Kendo для документации Angular Grid: Инициировать внешний экспорт.

Другие вопросы по теме