如何使用过滤数据将 kendo 网格导出到 excel 文件

Question

我想知道如何使用过滤数据将网格导出到 excel 文件。

然后选择是导出单个页面还是所有页面，始终使用过滤后的数据。

这是我的组件：

<kendo-grid
    [data]="gridData"
    [pageSize]="state.take"
    [skip]="state.skip"
    [sort]="state.sort"
    [filter]="state.filter"
    [sortable]="true"
    [pageable]="true"
    [filterable]="true"
    [selectable]="true"
    (dataStateChange)="dataStateChange($event)">
    <ng-template kendoGridToolbarTemplate>
        <button type="button" kendoGridExcelCommand icon="file-excel">Export To Excel</button>
    </ng-template>
    <kendo-grid-column field="id" [hidden]=true></kendo-grid-column>    
    <kendo-grid-column field="name"></kendo-grid-column>
    <kendo-grid-column field="surname"></kendo-grid-column>
    <kendo-grid-column field="birth_date"></kendo-grid-column>

    <kendo-grid-excel fileName="MyFile.xlsx" [fetchData]="allData"></kendo-grid-excel>
</kendo-grid>

TS 组件：

constructor() { 
  this.allData = this.allData.bind(this);
}
    
ngOnInit() {
  this.getGridData();
}

public allData(): ExcelExportData {
  const result: ExcelExportData =  {
    data: process(this.products, {sort: [{ field: 'name', dir: 'asc' }] }).data
  };
  return result;
}

getGridData(){
  this.MyService.getDataGrid().subscribe(data => {
    data = JSON.parse(data);;
    this.products= data;
    this.gridData = process(data, this.state)
  });
}

谢谢，

此致

Answer 1

来自Telerik Documentation 默认情况下，网格导出其当前数据。要导出与当前 Grid 数据不同的数据，请指定自定义 fetchData 函数（您已完成）。它 returns 一个 ExcelExportData 值或数组。 allData() 方法获取数据集合——通常但不是强制性的，与 Grid 绑定到的同一集合——对其进行处理（例如，应用或删除分页、过滤、排序等），并使用用于创建工作簿的结果对象。

所以，基本上一旦您告诉网格您想要自定义数据集，您就可以使用数据查询组件来查询您需要的数据。

import { Component } from '@angular/core';
import { process } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { products } from './products';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [kendoGridBinding]="products" [height]="400" [group]="group" [pageable]="true" [pageSize]="10">
            <ng-template kendoGridToolbarTemplate>
                <button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
            </ng-template>
            <kendo-grid-column field="ProductID" title="Product ID" [width]="200">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Product Name">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category" [hidden]="true">
            </kendo-grid-column>
        <kendo-grid-excel fileName="Products.xlsx" [fetchData]="allData"></kendo-grid-excel>
      </kendo-grid>
    `
})
export class AppComponent {
    public products: any[] = products;

    public group: any[] = [{
        field: 'Category.CategoryName'
    }];

    // Bind 'this' explicitly to capture the execution context of the component.
    constructor() {
        this.allData = this.allData.bind(this);
    }

    public allData(): ExcelExportData {
        const result: ExcelExportData =  {
            data: process(products, { group: this.group, sort: [{ field: 'ProductID', dir: 'asc' }] }).data,
            group: this.group
        };

        return result;
    }
}

您必须安装的 process function is from Kendo Data Query 组件。您可以提供 skip 和 take 参数来获取您的页面数据。

const result = process(data, {
    skip: 10,
    take: 20,
    group: [{
      field: 'category.categoryName',
            aggregates: [
                  { aggregate: "sum", field: "unitPrice" },
                  { aggregate: "sum", field: "unitsInStock" }
            ]
      }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
          { field: "discontinued", operator: "eq", value: true },
          { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

如何使用过滤数据将 kendo 网格导出到 excel 文件

how to export kendo grid to excel file with filtered data

export-to-excel

kendo-ui

kendo-grid

angular-kendo

angular