Angular Spreadsheet の概要

Angular Spreadsheet (Excel ビューア) コンポーネントは軽量で機能が豊富で、科学、ビジネス、財務など、あらゆる種類のスプレッドシート データを操作、視覚化、編集するために必要なすべてのオプションが用意されています。すべての情報は、セル、ペイン、およびワークシート間を直感的かつ簡単にナビゲートできる表形式で表示できます。IgxSpreadsheetComponent は、Excel のような柔軟なインターフェイス、詳細なチャート、およびアクティブ化、セル編集、条件付き書式設定、スタイル設定、選択、クリップボードなどの機能によって補完されます。

Angular Spreadsheet の例

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

import { saveAs } from "file-saver";
import { Workbook } from "igniteui-angular-excel";
import { WorkbookFormat } from "igniteui-angular-excel";
import { WorkbookSaveOptions } from "igniteui-angular-excel";

export class ExcelUtility {
    public static getExtension(format: WorkbookFormat) {
        switch (format) {
            case WorkbookFormat.StrictOpenXml:
            case WorkbookFormat.Excel2007:
                return ".xlsx";
            case WorkbookFormat.Excel2007MacroEnabled:
                return ".xlsm";
            case WorkbookFormat.Excel2007MacroEnabledTemplate:
                return ".xltm";
            case WorkbookFormat.Excel2007Template:
                return ".xltx";
            case WorkbookFormat.Excel97To2003:
                return ".xls";
            case WorkbookFormat.Excel97To2003Template:
                return ".xlt";
        }
    }

    public static load(file: File): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            ExcelUtility.readFileAsUint8Array(file).then((a) => {
                Workbook.load(a, null, (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            }, (e) => {
                reject(e);
            });
        });
    }

    public static loadFromUrl(url: string): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            const req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "arraybuffer";
            req.onload = (d) => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, null, (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            };
            req.send();
        });
    }

    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            const opt = new WorkbookSaveOptions();
            opt.type = "blob";

            workbook.save(opt, (d) => {
                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
                const fileName = fileNameWithoutExtension + fileExt;
                saveAs(d as Blob, fileName);
                resolve(fileName);
            }, (e) => {
                reject(e);
            });
        });
    }

    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
        return new Promise<Uint8Array>((resolve, reject) => {
            const fr = new FileReader();
            fr.onerror = (e) => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e) => {
                    const rs = (fr as any).resultString;
                    const str: string = rs != null ? rs : fr.result;
                    const result = new Uint8Array(str.length);
                    for (let i = 0; i < str.length; i++) {
                        result[i] = str.charCodeAt(i);
                    }
                    resolve(result);
                };
                fr.readAsBinaryString(file);
            } else {
                fr.onload = (e) => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ExcelUtility } from "./ExcelUtility";
import { IgxExcelModule } from "igniteui-angular-excel";
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet";

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxExcelModule,
    IgxSpreadsheetModule
],
  providers: [ExcelUtility],
schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet";
import { ExcelUtility } from "./ExcelUtility";

@Component({
  standalone: false,
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
  @ViewChild("spreadsheet", { read: IgxSpreadsheetComponent, static: true })
  public spreadsheet: IgxSpreadsheetComponent;

  constructor() { }

  public ngOnInit() {
      const excelFile = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx"
      ExcelUtility.loadFromUrl(excelFile).then((w) => {
          this.spreadsheet.workbook = w;
      });
  }

  public openFile(input: HTMLInputElement): void {
      if (input.files == null || input.files.length === 0) {
      return;
      }

      // console.log("Files:" + input.files[0].name);

      ExcelUtility.load(input.files[0]).then((w) => {
      this.spreadsheet.workbook = w;
      }, (e) => {
          console.error("Workbook Load Error:" + e);
      });
  }

  public workbookSave(): void {
      ExcelUtility.save(
          this.spreadsheet.workbook, ".xlsx")
  }
}
tsコピー

<div class="container vertical">
    <div class="options horizontal">
        <label class="options-label" for="openFile">Choose Excel File:</label>
        <input class="button" id="openFile" type="file" (change)="openFile($event.target)" accept=".xls, .xlt, .xlsx, .xlsm, .xltm, .xltx">
        <button class="workbookButton" (click)="workbookSave()">
            <label>Save Workbook</label>
        </button>
    </div>

    <div class="container">
        <igx-spreadsheet #spreadsheet height="100%" width="100%">
        </igx-spreadsheet>
    </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

機能

• 機能

Excel スプレッドシートと同様に、フィルタリング機能、ソート、セルの移動、セルの色に関するカスタマイズ、キーボード ショートカットを適用したり、数式を計算する機能を追加したりできます。

Spreadsheet の使用

• パフォーマンス

スプレッドシートはすべての最新のブラウザーと互換性があり、完璧な機能と簡便性を保証しながら、複雑で膨大なスプレッドシート モデル用に最適化されています。

• 柔軟なレイアウトと簡単なカスタマイズ

必要な機能のオン/オフを簡単に選択、追加、削除、切り替え、React シートを瞬時に構成できるため、すべてがエンドユーザーのニーズに応えます。構成可能なライブラリ、スタイルとフォーマットの選択肢、表示オプション、選択できるテーマもたくさんあります。

• 便利な Excel のようなインターフェース

Excel でデータを操作するのと同じように、スプレッドシート コンポーネントは、コピー、貼り付け、切り取りなど、よく知られているすべての Excel クリップボード操作を提供します。すぐに使い始めるために、追加のトレーニングや新しいスキルは必要ありません。また、ソート、完全なキーボード ナビゲーション、値と数式、セルのドラッグ、列と行の編集、フィルタリング、数値の書式設定、サイズ変更のオプションも付属しています。スマートで高速な計算エンジンは、最も複雑な推定にも対応します。Excel に依存しません。

• データ操作

科学、ビジネス、エンジニアリング、財務、教育のデータを収集して管理します。分析、高度なグリッド、レポート、データ入力フォーム、予算編成、予測シナリオ、カスタム スプレッドシートを準備および作成します。これらすべてが包括的な API のおかげです。

• 高速で安全なデータ処理

データ処理は 100% 安全です。

• Excel と CSV のインポートとエクスポート

組み込みの Excel インポート/エクスポート機能を使用すると、Excel ドキュメントを即座にロードして開き、オンデマンドで表示したり、変更を追加したり、保存したりできます。また、完成した Excel.xlsx スプレッドシートを簡単にエクスポートできます。

依存関係

Angular スプレッドシート コンポーネントをインストールするときは、core パッケージと excel パッケージもインストールする必要があります。

npm install --save igniteui-angular-core
npm install --save igniteui-angular-excel
npm install --save igniteui-angular-spreadsheet
cmd

モジュールの要件

IgxSpreadsheetComponent を作成するには、以下のモジュールが必要です。

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

@NgModule({
    imports: [
        // ...
        IgxExcelModule,
        IgxSpreadsheetModule,
        // ...
    ]
})
export class AppModule {}
ts

使用方法

Angular スプレッドシート モジュールがインポートされたので、次にスプレッドシートの基本設定です。

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

次のコード スニペットでは、外部の ExcelUtility クラスを使用して workbook を保存およびロードしています。

以下は、ワークブックを Angular スプレッドシートにロードする方法を示しています。

import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
import { ExcelUtility } from 'ExcelUtility';

// ...

@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
public spreadsheet: IgxSpreadsheetComponent;

ngOnInit() {
    const excelFile = '../../assets/Sample1.xlsx';
    ExcelUtility.loadFromUrl(excelFile).then((w) => {
      this.spreadsheet.workbook = w;
    });
}
ts

API リファレンス

• IgxSpreadsheetComponent
• workbook