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如何使用ng-content进行内容投影

layui导入导出excel方法

详解Angular中的组件交互

layui怎么导入excel

浅谈Angular组件的交互方式

html 导出到 excel

浅谈Angular中组件的生命周期

浅谈Angular中控制器、服务和指令的关系

浅谈Angular cli工具如何从零搭建并运行一个简单项目

详解Angular根模块与特性模块

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




打赏

取消

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

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

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

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

评论

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