Angular中如何導出表格Excel表格

這篇文章主要介紹了Angular中如何導出表格Excel表格，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

現在前端都可以進行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',
        },
      ],
    });  }
}

感謝你能夠認真閱讀完這篇文章，希望小編分享Angular中如何導出表格Excel表格內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!