Angular中怎么导出表格Excel表格?


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

import { Component } from '@angular/core';

import { STColumn, XlsxService } from '@delon/abc';

 

@Component({

  selector: 'components-xlsx-export',

  template: `

    <button nz-button (click)="download()">Export</button>

    <!-- 为了方便使用了ng-alain表格组件,也可以用ng-zorro或者其他库实现的表格。展现是次要的,重点是数据 -->

    <st [data]="users" [ps]="3" [columns]="columns" class="mt-sm"></st>

    `,

})

export class ComponentsXlsxExportComponent {

  constructor(private xlsx: XlsxService) {}

 

  // 表格数据-模拟数据

  users: any[] = Array(100)

    .fill({})

    .map((_item: any, idx: number) => {

      return {

        id: idx + 1,

        name: `name ${idx + 1}`,

        age: Math.ceil(Math.random() * 10) + 20,

      };

    });

  columns: STColumn[] = [

    { title: '编号', index: 'id', type: 'checkbox' },

    { title: '姓名', index: 'name' },

    { title: '年龄', index: 'age' },

  ];

 

  download() {

      // 组装要导出的数据

    const data = [this.columns.map(i => i.title)];

    this.users.forEach(i =>

      data.push(this.columns.map(c => i[c.index as string])),

    );

    // 使用组件XlsxService导出数据为xls文件

    this.xlsx.export({

      filename: '自定义命名列表.xlsx',

      sheets: [

        {

          data: data,

          name: 'sheet name',

        },

      ],

    });

  }

}

相关资源:
ng-alain XlsxService https://ng-alain.com/components/xlsx/zh
sheetjs https://sheetjs.com/

更多编程相关知识,请访问:编程学习!!

以上就是Angular中怎么导出表格Excel表格?的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

Angular和vue.js的区别是什么?Angular和vue.js的深度对比

Angular7中如何引用ng zorro antd?

聊聊Angular中的指令(directive)

Angular cli如果搭建Angular+typescript+material项目?

13个关于Angular的前端面试题(总结)

深入了解Angular中的pipe(管道)

浅谈Angular模板指令:ng-template和ng-container的用法

Angular开发者必须学习的19件事

如何利用管道提高Angular应用程序的性能?

详解Angular父子组件间如何传值?

更多相关阅读请进入《Angular》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...