Angularアプリケーションでリボンコンテナを追加するには、次の手順を実行します。

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

   コマンドプロンプト	コードのコピー
   npm install -g @angular/cli ng new designercomponent cd designercomponent npm start

   
   
2. リボンコンテナを使用するには、以下の必要なSpreadJSのパッケージをインストールします。

   コマンドプロンプト

   コードのコピー

   npm install @grapecity/spread-excelio npm install @grapecity/spread-sheets npm install @grapecity/spread-sheets-barcode npm install @grapecity/spread-sheets-charts npm install @grapecity/spread-sheets-languagepackages npm install @grapecity/spread-sheets-pdf npm install @grapecity/spread-sheets-print npm install @grapecity/spread-sheets-shapes npm install @grapecity/spread-sheets-resources-ja npm install @grapecity/spread-sheets-pivot-addon npm install @grapecity/spread-sheets-designer npm install @grapecity/spread-sheets-designer-resources-ja npm install @grapecity/spread-sheets-angular npm install @grapecity/spread-sheets-designer-angular

   
   
3. 次のサンプルコードを使用して、app.module.tsファイルにデザイナとリソースのモジュールをインポートします。

   app.module.ts

   コードのコピー

   import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import "@grapecity/spread-sheets-designer-resources-ja"; import { DesignerModule } from "@grapecity/spread-sheets-designer-angular"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DesignerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

   
   
4. 次のサンプルコードを使用して、styles.cssファイルにCSSファイルをインポートします。

   styles.css	コードのコピー
   @import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'; @import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

   
   
5. 次のサンプルコードを使用して、app.component.htmlファイルにデザイナタグを追加します。

   app.component.html	コードのコピー
   <designer [props]="props"></designer>

   
   
6. デザイナを構成するには、「props」のパラメータを渡します。

   app.component.ts

   コードのコピー

   import { Component } from '@angular/core'; import * as GC from '@grapecity/spread-sheets'; import '@grapecity/spread-sheets-resources-ja'; import '@grapecity/spread-sheets-designer-resources-ja'; import * as GcDesigner from '@grapecity/spread-sheets-designer'; GC.Spread.Common.CultureManager.culture('ja-jp'); @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { designer: any; spread: any; props = { styleInfo: 'width: 100%; height: 900px', }; }

   
   
7. アプリケーションを保存して実行します。

   コマンドプロンプト	コードのコピー
   npm start

SpreadJSインスタンスにアクセスする

designerInitializedイベントを使用してSpreadJSインスタンスにアクセスすることができます。designerInitializedイベントを使用するには、前項の手順 1 ～ 4を完了してから、次の手順を実行します。

5. 次のサンプルコードを使用して、app.component.html ファイルのdesignerInitializedイベントにイベントリスナーを追加します。

   app.component.html	コードのコピー
   <designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>

   
   
6. 次のサンプルコードを使用して、app.component.tsファイルを更新します。

   app.component.ts	コードのコピー
   export class AppComponent { props = { styleInfo: "width: 100%; height: 900px", config: null } afterDesignerInit(e: any) { //ホストされたSpreadインスタンスです。 var workbook = e.designer.getWorkbook(); var sheet = workbook.getActiveSheet(); sheet.setValue(1, 1, 'Test'); } }

   
   
7. アプリケーションを保存して実行します。

   コマンドプロンプト	コードのコピー
   npm start

ライセンスキーを設定する

Angular使用時は、SpreadJS、リボンコンテナのほか、ExcelIOに対してもライセンスキーの設定が必要となります。ExcelIOのライセンスキーにはSpreadJSのライセンスキーを設定します。

import '@grapecity/spread-sheets-designer-resources-ja';
import * as GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-designer';
import * as ExcelIO from "@grapecity/spread-excelio";
 
var sjsLicense = "sjs-distribution-key";
GC.Spread.Sheets.LicenseKey = sjsLicense;
(ExcelIO as any).LicenseKey = sjsLicense;
 
(GC.Spread.Sheets as any).Designer.LicenseKey = "designer-component-distribution-key";