SpreadJS Angular コンポーネントの使い方
SpreadJSは、Angular環境でも高い生産性を発揮します。いくつかの簡単なステップを踏むだけで、Angularアプリケーションに馴染みのあるExcelライクなスプレッドシートを実装することができます。
手順
- Angularアプリケーションを作成します。 - Angular CLIを使用して、新規のAngularアプリケーションを作成します。 コマンドプロンプトまたはターミナルから以下のコマンドを実行して、デフォルトのオプションでAngularアプリケーションを作成します。 詳細は、Angularリファレンスの Options をご参照ください。
ng new sjs-angular-app --defaults cd sjs-angular-app
- SpreadJSのnpmパッケージをインストールします。 - SpreadJSのAngularコンポーネントは、@grapecity/spread-sheets-angular のnpmパッケージで配布しています。メインの @grapecity/spread-sheets パッケージは、コア機能を提供しています。
これらのパッケージをインストールするには、アプリケーションのルートフォルダーから次のコマンドを実行します。
npm install @grapecity/spread-sheets-angular@xx.x.x npm install @grapecity/spread-sheets@xx.x.x // 日本語リソースをインストールします。 npm install @grapecity/spread-sheets-resources-ja@xx.x.x
'xx.x.x'の部分には製品のバージョンを指定してください。バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。
- SpreadJS Angular モジュールを登録します。- src\app\app.module.ts ファイルを開き、内容を以下のコードに変更します。 このコードは標準モジュールに加え、SpreadJSモジュールを登録します。
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, SpreadSheetsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
- SpreadJS Angularコンポーネントをアプリケーションに追加し、スプレッドシートを初期化します。 - src\app\app.component.ts を開き、内容を以下のコードに変更します。
import { Component } from '@angular/core'; import * as GC from '@grapecity/spread-sheets'; import '@grapecity/spread-sheets-resources-ja'; // 日本語カルチャを設定します GC.Spread.Common.CultureManager.culture('ja-jp'); @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'sjs-angular-app'; spread: GC.Spread.Sheets.Workbook; hostStyle = { width:'100%', height:'500px' }; // 初期化処理 workbookInit($event: any) { this.spread = $event.spread; } }
- アプリケーションにSpreadJS Angularテンプレートを追加します。 - src\app\app.component.html を開き、内容を以下のコードに変更します。
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)"> </gc-spread-sheets>
- SpreadJSのCSSをアプリケーションに追加します。 - angular.json を開き、グローバルスタイルノードにSpreadJSのCSSを追加します。
"styles": [ "src/styles.css", "node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" ]
- アプリケーションを実行します。 - ターミナルで以下のコマンドを入力し、アプリケーションを実行します。
ng serve
値と数式の設定
手順
- setValueメソッドを使用してセルの値を設定します。また、setFormulaメソッドで計算式を作成します。
workbookInit($event: any) { // spreadを初期化します。 this.spread = $event.spread; let spread = this.spread; let sheet = spread.getActiveSheet(); // テキストを設定します。 sheet.setText(0,0,"This is a text"); // 数値を設定します。 sheet.setValue(1, 0, 2245); sheet.setValue(2, 0, 345); // 日付型の値を設定します。 sheet.setValue(3, 0, new Date(2020, 10, 17)); sheet.getRange(3, 0, 1, 1).formatter("mm-dd-yyyy"); // 数式を設定します。(A2とA3セルの合計を計算します。) sheet.setFormula(3, 3, '=SUM(A2:A3)'); }
スタイルの設定
以下の機能を使って、データをより分かりやすく表現しましょう。
手順
- このステップでは、シートのスタイルを設定してデータを見やすく表現します。
workbookInit($event: any) { // スタイルを設定します。 sheet.setColumnWidth(1, 200); sheet.setColumnWidth(2, 200); sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)"); sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)"); sheet.addSpan(1, 1, 1, 2); sheet.getRange(1, 1, 6, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), { all: true }); sheet.getRange(2, 1, 5, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), { inside: true }); sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center); }
データ連結
以下のように、データを簡単かつ効率的に連結することができます。
手順
- getSheet メソッドを使用して、データ連結を設定するシートを取得します。
- セルに連結するデータソースを "new GC.Spread.Sheets.Bindings.CellBindingSource(person); "で作成します。
- setBindPath メソッドを使用して、指定されたシート領域の指定されたセルのバインディングパスを設定します。
- setDataSource メソッドを使用して、シートのデータソースを設定します。
workbookInit($event: any) { var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } }; var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person); sheet.setBindingPath(2, 2, 'name'); sheet.setBindingPath(3, 2, 'age'); sheet.setBindingPath(4, 2, 'gender'); sheet.setBindingPath(5, 2, 'address.postcode'); sheet.setDataSource(source); }