现在前端都可以进行excel文件的简单导入导出操作。
下面是使用插件导出表格成excel文件示例
组件是基于ng-alain封装的 xlsxservice，xlsservice是基于sheetjs开发的。
文未附相关资源
示例代码
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表格？的详细内容。