[{"id":"528e7c85-ad74-4b92-9f07-1b35686aae11","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"b2467823-b20a-4944-8436-3f4a40c2c3a6","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f9b599ec-cdc1-43e1-9642-54622ec0faf6","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0c129b8a-7ec0-4a16-8d94-9d4c96121d6b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"747081eb-5a06-4bac-8e9e-ce86732d168f","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7d934b01-e977-477a-b989-d25201e93a61","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"62adecb9-3003-4dce-9fa0-33dcdebbd1ed","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e2676e30-9712-47a0-ae38-733003d74c61","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6ef06797-8c4c-4b4b-ab10-bb5049aedeff","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"48e7593f-03b2-454d-a45c-cfebca71f3aa","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"59bb5a92-94c0-471a-bbe7-422ee9c9671d","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"56744168-6aab-46c6-8144-702458dc0030","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6e65ca69-e34b-47ac-a900-df6142d1173a","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"69a3b51b-bbd6-4bf9-b1bf-404bc1130679","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7e9ac756-4b27-4ccd-87b4-d959dae40aac","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f9f145be-535c-49f0-85e0-46b82e05ebb9","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f21c39dc-8e0d-4974-8795-5568b46411b4","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f1c5b466-1fd4-4130-88dd-9a624a6ea008","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"61aee7ec-5eae-4b92-b381-bc6236377b8b","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"8f3919c2-f0c9-4000-8008-be65026b6290","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1ec6d1ad-90cc-4094-980f-43aa5fbf9540","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"78b0db4b-017c-4839-8c1e-60f6f5cc6d2b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"cdf43116-31aa-4260-b33a-9a31c6845eb2","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9e8044a9-aa63-4694-997d-13747cd3ee9d","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ecd23122-8f53-4c60-837d-198fd699dfc0","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7a9b6718-9f7b-4f86-a13f-1af00e6e1fd8","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"363dda9e-fe69-4e08-aae8-37d0147254e3","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"5c96fdcf-19a2-4aed-838a-8ed87a27a690","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"43ba9142-9a42-4717-866b-92a6acafcf6e","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"58f7dc81-7471-48e9-9020-1a2359e01121","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0536592d-c039-4a1b-b482-aa0ba315a78d","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2981cffc-37a3-4e64-b682-71d898259ddc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"bdfcce31-4e7a-46f0-8571-d643d6ae5215","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"a1c74507-1bc8-4333-b919-337bcd7f421a","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6bb55ad9-04e0-47f2-8343-5e9cb0f24fbc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f668bfbe-c4fa-4b5f-add5-f82db90b9710","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6c4638bd-062c-4cc3-97c1-0daafc8624de","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"55aca15e-f3aa-46ab-95c6-9af4e0c779bc","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"000b26f4-c878-447f-acfc-d7e5571dbd01","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2822ff18-ccc4-40ab-b205-760e5dc66a93","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"978e1414-788c-42b3-ab45-c91e172a80f8","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2fced7df-d3ca-43a7-86d8-dfebd34541f7","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f7b8e156-8572-43aa-aec7-fe176eacc758","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2a1a5e3f-2bbe-4b96-8587-dbe13a089d4d","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9a3f74e4-ebdf-4c28-ac95-6901cccf878c","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9fd5b62f-8f1b-444e-9dcb-3d71965cfc6a","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ab33528a-79c3-4b1c-82dd-15c99eb9419b","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3a2e4995-96ce-4123-b7a9-d801c3135e5c","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1480a066-6c2d-4d50-bf05-fcfb0ea27869","tags":[{"product":null,"links":null,"id":"78ee7eb0-7046-4328-b5b1-adffaa31c45b","name":"New","color":"red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"533dc174-547d-4419-8260-a62dc1e3a2b6","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2756d249-e4ca-48db-9775-1b76fc3efc5a","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"c0e02434-b0d8-4b70-83ef-f6ad2ac07536","tags":[{"product":null,"links":null,"id":"a6e583c6-ea84-4023-910e-aaf8c71c5fea","name":"Upd","color":"blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]}]
        
(Showing Draft Content)

Excel IO Element

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:

    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 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:

    npm install @mescius/spread-excelio
    npm install file-saver --save
    npm install @types/file-saver --save
  5. Configure SpreadJS CSS

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

    {
      ...
      "projects":{
        "spread-sheets-angular-cli":{
          ...
          "architect":{
            ...
            "build":{
              ...
              "options":{
                ...
                "styles": [
                  "node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
                ],
                ...
              }
              ...
            }
            ...
          }
          ...
        }
      }
      ...
    }
  6. Use Excel IO in an Angular application

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

    <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 app.component.ts for using Excel IO element and preparing data for SpreadJS component as shown below:

    import { Component } from '@angular/core';
    import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
    import * as GC from '@mescius/spread-sheets';
    import * as Excel from '@mescius/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
    // The GC needs to be mounted on a global object
    // So that excelIO will get the license through the global GC
    (window as any).GC = GC;
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [SpreadSheetsModule],
      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

    Build and run the new project using the following command:

    ng serve