Excel IO要素

Excel IO要素を使用すると、Excelファイルのインポートおよびエクスポート機能を簡単に実現できます。

1. 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 @grapecity/spread-sheets
   npm install @grapecity/spread-sheets-angular
   npm install @grapecity/spread-sheets-resources-ja

4. プロジェクトでExcel IO AngularモジュールとFileSaver Angularモジュールをインストールする

   Excel I/Oおよびfile-saverモジュールをプロジェクトにインストールするには、次のコマンドを使用します。

   npm install @grapecity/spread-excelio
   npm install file-saver --save

5. angle.jsonファイルでSpreadJS のCSSを構成する

   次のように、angular.jsonファイルでSpreadJS CSSを構成します。

   {
     ...
     "projects":{
       "spread-sheets-angular-cli":{
         ...
         "architect":{
           ...
           "build":{
             ...
             options:{
               ...
               "styles": [
                 "node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css"
               ],
               ...
             }
             ...
           }
           ...
         }
         ...
       }
     }
     ...
   }

6. AngularアプリケーションでExcel IOを使用する

   Spread.Sheetsモジュールをインポートするには、app.module.tsファイルを次のように変更します。

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   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コンポーネントを表示するには、app.component.htmlを次のように変更します。

   <div class='maincontainer'>
     <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
     </gc-spread-sheets>
     <div class='loadExcelInput'>
       <p>Open Excel File</p>
       <input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange($event)" />
     </div>
     <div class='exportExcel'>
       <p>Save Excel File</p>
       <button (click)="onClickMe($event)">Save Excel!</button>
     </div>
   </div>

   Excel IO要素を使用して、Excelファイルのインポート／エクスポート機能を実装するには、app.component.tsを次のように変更します。

   import { Component, ViewChild } from '@angular/core';
   import * as GC from '@grapecity/spread-sheets';
   import * as Excel from '@grapecity/spread-excelio';
   import { saveAs } from 'file-saver';
   // ライセンス情報
   var SpreadJSKey = "xxxx";
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   // また、SpreadJSキーをEXCELIOに設定する必要があります
   (<any>Excel).LicenseKey = SpreadJSKey;
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     spreadBackColor = 'aliceblue';
     hostStyle = {
       width: '95vw',
       height: '80vh'
     };
     private spread!: GC.Spread.Sheets.Workbook;;
     private excelIO;
     constructor() {
       this.excelIO = new Excel.IO();
     }
     workbookInit(args: { spread: GC.Spread.Sheets.Workbook; }) {
       const self = this;
       self.spread = args.spread;
       const sheet = self.spread.getActiveSheet();
       sheet.getCell(0, 0).text('Test ExcelIO').foreColor('blue');
     }
     onFileChange(args: any) {
       const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files[0];
       if (self.spread && file) {
         self.excelIO.open(file, (json: Object) => {
           self.spread.fromJSON(json, {});
           setTimeout(() => {
             alert('Excel loaded successfully');
           }, 0);
         }, (error: any) => {
           alert('load fail');
         });
       }
     }
     onClickMe(args: any) {
       const self = this;
       const filename = 'ExportedExcel.xlsx';
       const json = JSON.stringify(self.spread.toJSON());
       self.excelIO.save(json, function (blob: any) {
         saveAs(blob, filename);
       }, function (e: any) {
         console.log(e);
       });
     }
   }

7. アプリを実行する

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

   ng serve