推奨関連チュートリアル: "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: ` <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/
プログラミング関連の知識の詳細については、次を参照してください: プログラミング勉強###! !
以上がExcel テーブルを Angular でエクスポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。