Spread-sheets-io Element

By using the SpreadJS Excel import and export module in Angular, you can render and display worksheets in the browser and also import or export spreadsheet files in Excel, SSJSON, or SJS format.

1. Install the Angular CLI globally

   Open the Command Prompt window and type the following command:

   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:

   ng new spread-sheets-angular-cli --style css --ssr false
   cd spread-sheets-angular-cli

3. Install SpreadJS NPM package

   Install the SpreadJS npm package using the following commands:

   npm install @mescius/spread-sheets
   npm install @mescius/spread-sheets-angular

4. Install spread-sheets-io Angular Module and FileSaver Angular Module in the Project

   Install the spread-sheets-io and file-saver modules in your project using the following commands:

   npm install @mescius/spread-sheets-io
   npm install file-saver --save
   npm install @types/file-saver --save

5. Configure SpreadJS CSS

   Configure the SpreadJS CSS in styles.css as shown below:

   @import "../node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";

6. Use the SpreadJS Excel import and export module in the Angular application.

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

   <div class="excelio-demo">
     <input
       type="file"
       accept=".sjs,.xlsx,.ssjson"
       (change)="onFileSelected($event)"
     />
   
     <label for="exportFileType">File Type:</label>
     <select id="exportFileType" #exportType>
       <option value="xlsx">Excel</option>
       <option value="ssjson">SSJSON</option>
       <option value="sjs">SJS</option>
     </select>
   
     <button type="button" (click)="exportFile(exportType.value)">Export</button>
   
     <gc-spread-sheets
       [hostStyle]="hostStyle"
       (workbookInitialized)="initSpread($event)"
     >
       <gc-worksheet></gc-worksheet>
     </gc-spread-sheets>
   </div>

   Modify app.ts for using spread-sheets-io element and preparing data for SpreadJS component as shown below:

   import { Component } from '@angular/core';
   import * as GC from '@mescius/spread-sheets';
   import '@mescius/spread-sheets-io';
   import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
   import { saveAs } from 'file-saver';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [SpreadSheetsModule],
     templateUrl: './app.html',
     styleUrl: './app.css'
   })
   export class App {
     spread!: GC.Spread.Sheets.Workbook;
     hostStyle = {
       width: '100%',
       height: '600px'
     };
     fileTypeMap = {
       sjs: 'sjs',
       xlsx: 'xlsx',
       ssjson: 'ssjson'
     };
   
     initSpread(args: { spread: GC.Spread.Sheets.Workbook }): void {
       this.spread = args.spread;
       const sheet = this.spread.getActiveSheet();
       sheet.setValue(0, 0, 'Hello World!');
     }
   
     onFileSelected(event: Event): void {
       const input = event.target as HTMLInputElement;
       const file = input.files?.[0];
   
       if (file) {
         this.loadFile(file);
       }
     }
   
     getFileType(fileName: string): string | undefined {
       return fileName.split('.').pop()?.toLowerCase();
     }
   
     loadFile(file: File): void {
       const type = this.getFileType(file.name);
       const fileType =
         type === this.fileTypeMap.xlsx
           ? GC.Spread.Sheets.FileType.excel
           : GC.Spread.Sheets.FileType.ssjson;
   
       if (type === this.fileTypeMap.sjs) {
         this.spread.open(file, () => console.log('SJS file loaded'), console.error);
       } else if (
         type === this.fileTypeMap.xlsx ||
         type === this.fileTypeMap.ssjson
       ) {
         this.spread.import(
           file,
           () => console.log('File loaded'),
           console.error,
           { fileType }
         );
       } else {
         console.error('Unsupported file type');
       }
     }
   
     exportFile(type: string): void {
       const normalizedType = type.toLowerCase();
       const fileName = `export.${normalizedType}`;
       const fileType =
         normalizedType === this.fileTypeMap.xlsx
           ? GC.Spread.Sheets.FileType.excel
           : GC.Spread.Sheets.FileType.ssjson;
   
       if (normalizedType === this.fileTypeMap.sjs) {
         this.spread.save((blob: Blob) => saveAs(blob, fileName), console.error);
       } else if (
         normalizedType === this.fileTypeMap.xlsx ||
         normalizedType === this.fileTypeMap.ssjson
       ) {
         this.spread.export(
           (blob: Blob) => saveAs(blob, fileName),
           console.error,
           { fileType }
         );
       }
     }
   }

7. Build and run the project

   Build and run the new project using the following command:

   npm start