2019年02月22日 22:33
原创作品,转载时请务必以超链接形式标明文章原始出处,否则将追究法律责任。
话说大唐不夜城的夜景还真是美,看下图。身在这座城市,你必须努力,否则房租都交不起。
使用kendo UI for angular的同学,需要将表格中的子表格也导出,这个如何实现呢。
import { Observable } from 'rxjs/Observable'; import { saveAs } from '@progress/kendo-file-saver'; import { Workbook } from '@progress/kendo-angular-excel-export'; public onExcelExport(args: any): void { args.preventDefault(); //不要自动save下载。 const details = []; //子表格绑定的数据 const workbook = args.workbook; //workbook实例 const rows = workbook.sheets[0].rows; const headerOptions = rows[0].cells[0]; const data = this.allCategories.data; //父表格数据 for (let idx = 0; idx < data.length; idx++) { details.push(data[idx].subcategories); //将子表格每一行的数据加入数组 } for (let idx = details.length - 1; idx >= 0; idx--) { const detailData = <any>details[idx]; //子表格第idx行的数据 for (let productIdx = detailData.length - 1; productIdx >= 0; productIdx--) { const detail = detailData[productIdx]; rows.splice(idx + 2, 0, { cells: [{}, { value: detail.ID }, { value: detail.Name }] }); //将子表格的数据插入行 } //设置表头 rows.splice(idx + 2, 0, { cells: [ {}, Object.assign({}, headerOptions, { value: 'Subcategory ID' }), Object.assign({}, headerOptions, { value: 'Subcategory Name' }) ] }); } //保存,下载 new Workbook(workbook).toDataURL().then((dataUrl: string) => { saveAs(dataUrl, 'Categories.xlsx'); }); }
OK就是这么简单,如果你还不清楚,请看官网:https://www.telerik.com/kendo-angular-ui/components/grid/export/excel-export/#toc-exporting-master-detail-grid
如果你要改变Excel的样式,可以像如下这样设置隔行变色及对齐方式。
public onExcelExport(e: any): void { const rows = e.workbook.sheets[0].rows; rows[0].cells[2].hAlign = 'center'; let altIdx = 0; rows.forEach((row) => { if (row.type === 'data') { if (altIdx % 2 !== 0) { row.cells.forEach((cell) => { cell.background = '#aabbcc'; }); } altIdx++; } }); }
发表评论
匿名
用户评论
暂无评论