在 Angular 2 中为多个动态剑道网格导出 excel
Posted
技术标签:
【中文标题】在 Angular 2 中为多个动态剑道网格导出 excel【英文标题】:Exporting excel for multiple dynamic kendo grids in Angular 2 【发布时间】:2018-07-01 17:50:12 【问题描述】:我正在开发一个网页,其中包含基于用户输入的多个剑道网格组件。我的要求是将所有这些网格导出到 Excel 报告。我为每个网格实现了 Kendo-grid excel 导出,它按预期工作,但是为所有这些动态网格带来了一个通用的导出按钮,我该如何继续。我正在使用 angular 2 来实现此功能。我可以为所有这些网格使用一个公共参考变量吗?请提出建议。
【问题讨论】:
您希望它如何在客户端运行尚不清楚。 【参考方案1】:请参考这个问题的答案。它将帮助您合并来自多个来源的所有工作表 - Kendo UI for Angular 2: Excel export having multiple worksheets
如果您想自己操作工作表,请参阅plunker 我写的。它显示了如何添加行(作为标题或数据) - 在撰写本文时,这没有记录。
相关代码:
import Component from '@angular/core';
import products from './products';
@Component(
selector: 'my-app',
template: `
<button type="button" class="k-button" (click)="save(excelexport)">Export To Excel</button>
<kendo-excelexport #excelexport [data]="data" [fileName]=downloadFileName>
<kendo-excelexport-column field="ProductID" title="Product ID" [width]="75">
</kendo-excelexport-column>
<kendo-excelexport-column field="ProductName" title="Product Name">
</kendo-excelexport-column>
<kendo-excelexport-column field="SomeDate" title="Start Date" [cellOptions]=" format: 'mm/dd/yyyy' "></kendo-excelexport-column>
</kendo-excelexport>
`
)
export class AppComponent
public data: any[] = products;
public downloadFileName: string = "Report - Rates.xlsx"
public save(component): void
const options = component.workbookOptions();
options.sheets[0].name = `Rate Card Report`;
let rows = options.sheets[0].rows;
let infoRows = [
cells: [value: "12345"], type: 'data', xyz: 1 ,
cells: [value: "My stuff LLC"], type: 'data', xyz: 1 ,
cells: [value: "2 Fun Street"], type: 'data', xyz: 1 ,
cells: [value: "Rye, NY - 10580"], type: 'data', xyz: 1 ,
];
Array.prototype.unshift.apply(rows, infoRows);
console.log(rows);
component.save(options);
【讨论】:
非常感谢这项工作,完全符合我的要求。你节省了我很多时间再次感谢。以上是关于在 Angular 2 中为多个动态剑道网格导出 excel的主要内容,如果未能解决你的问题,请参考以下文章