2019年02月22日 22:33
原创作品,转载时请务必以超链接形式标明文章原始出处,否则将追究法律责任。

话说大唐不夜城的夜景还真是美,看下图。身在这座城市,你必须努力,否则房租都交不起。

image.png

使用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++;
            }
        });
    }
发表评论
匿名  
用户评论
暂无评论