IgxSpreadsheet にエクセルファイルを表示する

Ignite UI for Angular 11.0.12 バージョン時点での情報に基づいています。

IgxSpreadsheet にエクセルファイルを表示するサンプルです。

IgxSpreadsheet を利用するためには、事前にプロジェクトに次のパッケージをインストールしておきます。

• igniteui-angular-core
• igniteui-angular-excel
• igniteui-angular-spreadsheet

続いて、AppModule で IgxExcelModule と IgxSpreadsheetModule をインポートします。

app.module.ts

...
import { IgxExcelModule } from 'igniteui-angular-excel';
import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxExcelModule,
    IgxSpreadsheetModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

コンポーネント側の実装に移ります。

HTML テンプレートで IgxSpreadsheet を宣言し、TypeScript 本体でエクセルファイルの読み込みを行います。

app.component.html

<igx-spreadsheet #spreadsheet height="500px" width="100%">
</igx-spreadsheet>

app.component.ts

export class AppComponent implements OnInit {
  title = 'igx-spreadsheet-load-excel';
  @ViewChild('spreadsheet') spreadsheet: IgxSpreadsheetComponent;
  ngOnInit() {
    const excelFile = '../../assets/data.xlsx';
    ExcelUtility.loadFromUrl(excelFile).then((w) => {
      this.spreadsheet.workbook = w;
    });
  }
}