Angular

SpreadJSは、Angularをサポートします。

メモ： SpreadJSはAngularバージョン 17、18をサポートしています。

Angularを使用するには、次の手順を実行します。

npmパッケージの使用

次の手順を実行します。

1. Angular CLIをインストールする

   コマンドプロンプトで次のコマンドを実行して、Angular CLIをインストールします。

   npm install -g @angular/cli

   
   

2. Angularアプリを作成する

   Angularアプリを作成して、アプリフォルダに移動します。

   ng new spread-sheets-angular-cli --style css --ssr false

   cd spread-sheets-angular-cli

   
   

3. SpreadJSモジュールをインストールする

   SpreadJS本体、SpreadJSのAngularモジュール、および日本語リソースを、npmからインストールします。

   npm install @mescius/spread-sheets@xx.x.x

   npm install @mescius/spread-sheets-angular@xx.x.x

   npm install @mescius/spread-sheets-resources-ja@xx.x.x

   type=warning

   'xx.x.x'の部分には製品のバージョンを指定してください。（例：17.1.10）

   バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

   製品のバージョンについては、製品購入時またはトライアル版でダウンロードした製品コンテンツに含まれるリリースノートをご確認ください。

4. スタイルをインポートする

   以下のように、angular.jsonファイルで、SpreadJSのスタイルファイルをインポートします。

   {
     ...
     "projects":{
         ...
               "styles": [
                 "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css"
               ],
               ...

5. AngularアプリケーションでSpreadJSを使用するモジュールをインポートする

   src\app\app.component.htmlファイルを以下のように修正し、SpreadJSを追加します。

   ...
   <gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
     <gc-worksheet [name]="sheetName" [dataSource]="data">
       <gc-column dataField="商品名" [width]=300></gc-column>
       <gc-column dataField="カテゴリ" [width]=columnWidth></gc-column>
       <gc-column dataField="単価" [width]=columnWidth formatter="$ #.00"></gc-column>
       <gc-column dataField="購入店" [width]=columnWidth></gc-column>
     </gc-worksheet>
   </gc-spread-sheets>

   src\app\app.component.tsを以下のように修正し、SpreadJSに表示するデータを用意して、SpreadJSの初期化処理を実装します。

   import { Component } from '@angular/core';
   import '@mescius/spread-sheets-resources-ja';
   import * as GC from "@mescius/spread-sheets";
   import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
   
   // カルチャ設定
   GC.Spread.Common.CultureManager.culture('ja-jp');
   
   // GC.Spread.Sheets.LicenseKey = "xxxxxxxx";
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [SpreadSheetsModule],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     title = 'spread-sheets-angular-cli';
     spreadBackColor = 'aliceblue';
     sheetName = '商品リスト';
     hostStyle = {
       width: '800px',
       height: '600px'
     };
     data = [
       { 商品名: 'Apple', カテゴリ: 'Fruit', 単価: 1, '購入店': 'Wal-Mart' },
       { 商品名: 'Potato', カテゴリ: 'Fruit', 単価: 2.01, '購入店': 'Other' },
       { 商品名: 'Tomato', カテゴリ: 'Vegetable', 単価: 3.21, '購入店': 'Other' },
       { 商品名: 'Sandwich', カテゴリ: 'Food', 単価: 2, '購入店': 'Wal-Mart' },
       { 商品名: 'Hamburger', カテゴリ: 'Food', 単価: 2, '購入店': 'Wal-Mart' },
       { 商品名: 'Grape', カテゴリ: 'Fruit', 単価: 4, '購入店': 'Sun Store' }
     ];
     columnWidth = 100;
   
     workbookInit(args: { spread: GC.Spread.Sheets.Workbook }){
       let spread:GC.Spread.Sheets.Workbook = args.spread;
       let sheet = spread.getActiveSheet();
     }
   }

6. アプリを実行する

   以下のコマンドでアプリを実行します。

   ng serve

以下のトピックで、タグ階層とSpread要素について説明します。

• タグ階層

• シート要素

• ワークシート要素

• 列要素

• Excel IO要素

type=warning

AngularでExcelIO要素を使用するには、Excel IOモジュールをインポートし、同じライセンスキーを使用して個別にライセンスを取得する必要があります。詳細については、Excel IO要素を参照します。