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

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

相关教程推荐:《angularjs教程》

现在前端都可以进行excel文件的简单导入导出操作。

下面是使用插件导出表格成excel文件示例

组件是基于ng-alain封装的 XlsxService,XlsService是基于sheetjs开发的。

文未附相关资源

示例代码

import { Component } from '@angular/core';import { STColumn, XlsxService } from '@delon/abc';@Component({  selector: 'components-xlsx-export',  template: `                `,})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/zhsheetjs https://sheetjs.com/

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

以上就是Angular中怎么导出表格Excel表格?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2721236.html

(0)
上一篇 2025年3月7日 22:43:56
下一篇 2025年2月28日 19:47:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Angular实现只执行正在开发的新单元测试

    angular单元测试如何只执行指定的测试用例,提高测试速度?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关教程推荐:《angular》 Angular项目的规模一旦变大,待执行的单元…

    2025年3月7日 编程技术
    200
  • 分享Angular中关于表单的一些知识点

    本篇文章给大家分享一些angular表单相关的知识点。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关教程推荐:《angular》 点击输入框,全选内容 登录后复制 点击输入框,清空内容 登录后复制 通过事件获取输入框…

    2025年3月7日
    200
  • 解决angular中的浏览器兼容性问题的方法介绍

    angular中的浏览器兼容性问题怎么解决?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关教程推荐:《angular教程》 问题:edge浏览器下,固定列的边框消失 原因:ng-zorro…

    2025年3月7日
    200
  • 详解angular中jsencrypt插件的使用方法

    本篇文章给大家介绍一下angular中jsencrypt插件的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关推荐:《angular教程》 angular使用jsencrypt插件 1.首先在angular项…

    2025年3月7日
    200
  • angular与Angularjs的简单比较

    本篇文章我们来简单对比一下angular与angularjs。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关推荐:《angularjs教程》 Angular相关介绍 angular是由Google维护的一款开源jav…

    2025年3月7日 编程技术
    200
  • angular4实现tab切换的方法介绍

    angular怎么实现tab栏切换?本篇文章给大家介绍一下angular4实现tab栏切换的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关教程推荐:《angular教程》 管理系统 tab 切换页,是一种常见的…

    2025年3月7日
    200
  • 12个关于Angular的经典面试题

    Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎。不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学习Angular 2的知识概念的绝佳途径…

    2025年3月7日
    200
  • 了解Angularjs中的“模块”

    本篇文章带大家了解一下angularjs中的“模块”。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关教程推荐:《angularjs教程》 模块定义了一个应用程序。 模块是应用程序中不同部分的容器。 模块是应用控制器的…

    2025年3月7日
    200
  • Angular使用ngrx/store做状态管理

    本篇文章给大家介绍一下angular ngrx/store状态管理的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关教程推荐:《angular教程》 Angular中使用ngrx做状态管理 简介 ngrx/sto…

    2025年3月7日
    200
  • Angular入门学习之环境和项目的搭建

    一、Angular介绍 Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。 根据项目数统计an…

    2025年3月7日 编程技术
    200

发表回复

登录后才能评论