可以导出多个kendo网格以实现角度优势

时间:2017-12-15 15:19:22

标签: angular kendo-ui telerik kendo-grid

有一个记录功能可以将多个kendo网格导出到一个excel文件中,用于jQuery网格,但没有任何内容等于网站上的角度。

然而也许有人设法为角色做到了?

2 个答案:

答案 0 :(得分:2)

您可以导出多个数据集(Grid可以绑定到每个数据集,但Excel导出不是必需的)。这是一个例子:

<button type="button" class="k-button" (click)="save(excelexport, excelexport1)">Export To Excel</button>

        <kendo-excelexport [data]="data" fileName="Products.xlsx" #excelexport>
            <kendo-excelexport-column field="ProductID" [locked]="true" title="Product ID" [width]="200">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="ProductName" title="Product Name" [width]="350">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="UnitPrice" title="Unit Price" [width]="120">
            </kendo-excelexport-column>
      </kendo-excelexport>
        <kendo-excelexport [data]="data1" fileName="Products.xlsx" #excelexport1>
            <kendo-excelexport-column field="ProductID" [locked]="true" title="Product ID" [width]="200">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="ProductName" title="Product Name" [width]="350">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="UnitPrice" title="Unit Price" [width]="120">
            </kendo-excelexport-column>
      </kendo-excelexport>

public save(component1, component2): void {
      Promise.all([component1.workbookOptions(), component2.workbookOptions()]).then((workbooks) => {
        workbooks[0].sheets = workbooks[0].sheets.concat(workbooks[1].sheets);
        component1.save(workbooks[0]);
      });
    }

http://plnkr.co/edit/nAGrfaM2H4VK6tKIFTyP?p=preview

Excel Export documentation也可以派上用场。

答案 1 :(得分:0)

所以解决方案是使用kendo API,它允许我们从头开始组装文件,只需将带有数据和参数的WorkbookOptions对象传递给save方法。

简短示例js-code:

 public save(component): void {
    const options = {
        sheets: [
            {
                name: 'Sheet One',
                filter: {
                    from: 0,
                    to: 1
                },
                columns: [
                    {
                        width: 100
                    },
                    {
                        width: 200
                    },
                ],
                rows: [
                    {
                        cells: [
                            {
                                color: '#ffffff',
                                background: '#808080',
                                value: 'First name'
                            },
                            {
                                color: '#ffffff',
                                background: '#808080',
                                value: 'Last Name'
                            }
                        ]
                    },
                    {
                        cells: [
                            {
                                value: 'Erick'
                            },
                            {
                                value: 'Carthman'
                            }
                        ]
                    },
                    {
                        cells: [
                            {
                                value: 'Stan'
                            },
                            {
                                value: 'Marzh'
                            }
                        ]
                    }
                ]
            },
            {
                name: 'Sheet Two',
                filter: {
                    from: 0,
                    to: 1
                },
                columns: [
                    {
                        width: 100
                    },
                    {
                        width: 200
                    },
                ],
                rows: [
                    {
                        cells: [
                            {
                                color: '#ffffff',
                                background: '#808080',
                                value: 'Name'
                            },
                            {
                                color: '#ffffff',
                                background: '#808080',
                                value: 'Length'
                            }
                        ]
                    },
                    {
                        cells: [
                            {
                                value: 'Vasya'
                            },
                            {
                                value: 10
                            }
                        ]
                    },
                    {
                        cells: [
                            {
                                value: 'Petya'
                            },
                            {
                                value: 19.5
                            }
                        ]
                    }
                ]
            }
        ]
    };
    component.save(options);

标记:

        <button type="button" class="k-button" (click)="save(excelexport)">Export To Excel</button>
    <kendo-excelexport fileName="Products.xlsx" #excelexport></kendo-excelexport>