Excel IO 元素

使用SpreadJS中的Excel IO元素和Angular，您可以在网页上快速呈现和显示Excel工作表，同时执行导入和导出操作，而无需任何麻烦。

全局安装Angular CLI
打开命令提示窗口并键入以下命令：
```
npm install -g @angular/cli
```
使用 Angular CLI 创建新项目
使用以下命令创建新项目并导航到项目目录：
```
ng new spread-sheets-angular-cli --style css --ssr false
cd spread-sheets-angular-cli
```

安装 SpreadJS Npm 软件包

使用以下命令安装SpreadJS Npm软件包：

npm install @grapecity-software/spread-sheets
npm install @grapecity-software/spread-sheets-angular

在项目中安装Excel IO Angular Module和FileSaver Angular Module
使用以下命令在项目中安装Excel I/O和文件保护程序模块：
```
npm install @grapecity-software/spread-excelio
npm install file-saver --save
npm install @types/file-saver --save
```

在angular.json中配置SpreadJS CSS

在angular.json中配置SpreadJS CSS，如下所示：

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

在Angular应用中使用Excel IO

修改app.component.html以查看SpreadJS组件，如下所示：

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

修改的app.component.ts；使用Excel IO元素并为SpreadJS组件准备数据；如下图所示：

import { Component } from '@angular/core';
import { SpreadSheetsModule } from "@grapecity-software/spread-sheets-angular";
import * as GC from '@grapecity-software/spread-sheets';
import * as Excel from '@grapecity-software/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);
    });
  }
}

使用Angular CLI构建并运行项目
使用以下命令生成并运行新项目：
```
ng serve
```