SpreadJS 15
JavaScript Frameworks / SpreadJS with Angular / Excel IO Element
In This Topic
    Excel IO Element
    In This Topic

    Using the Excel IO element in SpreadJS with Angular, you can quickly render and display the Excel sheets on the webpages while also executing the import and export operations without any hassle.

    1. Install the Angular CLI globally

      Open the Command Prompt window and type the following command:

      Command Prompt
      Copy Code
      npm install -g @angular/cli
      

    2. Create a new project using Angular CLI

      Create a new project using the following command and navigate to the project directory:

      Command Prompt
      Copy Code
      ng new spread-sheets-angular-cli
      cd spread-sheets-angular-cli
      

    3. Install SpreadJS Npm package

      Install the SpreadJS Npm package using the following commands:

      Command Prompt
      Copy Code
      npm install @grapecity/spread-sheets
      npm install @grapecity/spread-sheets-angular
      

    4. Install Excel IO Angular Module and FileSaver Angular Module in the Project

      Install the Excel I/O and file-saver modules in your project using the following commands:

      Command Prompt
      Copy Code
      npm install @grapecity/spread-excelio
      npm install file-saver --save
      

    5. Configure SpreadJS CSS in angular.json

      Configure the SpreadJS CSS in angular.json as shown below:

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

    6. Use Excel IO in an Angular application

      Modify the app.module.ts for importing the SpreadJS module as shown below:

      app.module.ts
      Copy Code
      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 { }
      

      Modify the app.component.html for viewing the SpreadJS component as shown below:

      app.component.html
      Copy Code
      <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>
      

      Modify the app.component.ts for using Excel IO element and preparing data for SpreadJS component as shown below:

      app.component.ts
      Copy Code
      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';
      // LICENSE INFORMATION
      var SpreadJSKey = "xxxx";
      GC.Spread.Sheets.LicenseKey = SpreadJSKey;
      // NEED TO SET SpreadJS Key to EXCELIO also
      (<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. Build and run the project using Angular CLI

      Build and run the new project using the following command:

      Command Prompt
      Copy Code
      ng serve