首頁 > web前端 > js教程 > Angular中怎麼匯出表格Excel表格?

Angular中怎麼匯出表格Excel表格?

青灯夜游
發布: 2021-02-01 11:47:17
轉載
3906 人瀏覽過

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: `
    <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表格?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板