Angular

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

メモ： SpreadJSはAngularバージョン 15、16 および 17をサポートしています。

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

npmパッケージの使用

次の手順を実行します。

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

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

   npm install -g @angular/cli

   
   

2. Angularアプリを作成する

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

   ng new spread-sheets-angular-cli

   cd spread-sheets-angular-cli

   
   

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

   Spread.Sheets本体、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'の部分には製品のバージョンを指定してください。バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

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

   angular.jsonファイルで、スタイルファイルをインポートします。

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

5. Angularモジュールをインポートする

   src\app\app.module.tsファイルで、Angularモジュールをインポートします。

   import { BrowserModule } from '@angular/platform-browser;
   import { NgModule } from '@angular/core';
   
   import { AppComponent } from './app.component';
   
   import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       SpreadSheetsModule
     ],
     ...

   src\app\app.component.htmlファイルに、Spread.Sheetsウィジェットを追加します。

   ...
   <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で、Spread.Sheetsウィジェットに表示するデータを用意します。

   import { Component } from '@angular/core';
   import '@mescius/spread-sheets-resources-ja';
   import * as GC from "@mescius/spread-sheets";
   
   // カルチャ設定
   GC.Spread.Common.CultureManager.culture('ja-jp');
   
   // GC.Spread.Sheets.LicenseKey = "xxxxxxxx";
   
   @Component({
     selector: 'app-root',
     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:any){
       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要素を参照します。