How to export an Excel table in Angular?

Recommended related tutorials: "angularjs tutorial"

Now the front-end can perform simple import and export operations of excel files.

The following is an example of using a plug-in to export a table into an excel file

The component is based on XlsxService encapsulated by ng-alain, and XlsService is developed based on sheetjs.

Related resources not attached

Sample code

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

Related resources:
ng-alain XlsxService https://ng-alain.com/components/xlsx/zh
sheetjs https://sheetjs.com/

For more programming-related knowledge, please visit:Programming study! !

The above is the detailed content of How to export an Excel table in Angular?. For more information, please follow other related articles on the PHP Chinese website!