Excel 테이블을 Angular로 내보내는 방법은 무엇입니까?

추천 관련 튜토리얼: "angularjs tutorial"

이제 프런트 엔드에서 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/comComponents/xlsx/zh
sheetjs https:// sheetjs.com/

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 배우기를 방문하세요! !

위 내용은 Excel 테이블을 Angular로 내보내는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!