在 Angular 中使用 SpreadJS

可以通过以下方式在 Angular 项目中使用 SpreadJS：

注意： SpreadJS 支持 Angular 18、19 和 20 版本。

使用节点包管理器

此方法包括以下步骤：

全局安装 Angular CLI
打开命令提示符窗口，然后键入以下命令：
```
npm install -g @angular/cli 
```
使用 Angular CLI 创建一个新项目
接下来，您需要使用以下命令创建一个新项目：
```
ng new spread-sheets-angular-cli
cd spread-sheets-angular-cli
```

安装 SpreadJS NPM 包

现在，您可以使用以下命令安装 SpreadJS NPM 软件包：

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

在 angular.json 中配置 SpreadJS CSS
现在，您可以在 angular.json 中配置 SpreadJS CSS，如下所示：
```
@import "../node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
```

在 Angular 应用程序中使用 SpreadJS。

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

<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
  <gc-worksheet [name]="sheetName" [dataSource]="data">
    <gc-column dataField="Name" width=300></gc-column>
    <gc-column dataField="Category" [width]=columnWidth></gc-column>
    <gc-column dataField="Price" [width]=columnWidth formatter="$ #.00"></gc-column>
    <gc-column dataField="Shopping Place" [width]=columnWidth></gc-column>
  </gc-worksheet>
</gc-spread-sheets>

修改 app.ts 文件，以便为 SpreadJS 组件准备数据，如下所示。

您可以在初始化组件之前输入有效的 SpreadJS 许可证密钥。

import { Component } from '@angular/core';
import * as GC from "@grapecity-software/spread-sheets";
import { SpreadSheetsModule } from "@grapecity-software/spread-sheets-angular";

// Licensing SpreadJS
var SpreadJSKey = "xxx";          // Enter a valid license key.
GC.Spread.Sheets.LicenseKey = SpreadJSKey;

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SpreadSheetsModule],
  templateUrl: './app.html',
  styleUrls: ['./app.css']
})
export class AppComponent {
  spreadBackColor = 'aliceblue';
  sheetName = 'Goods List';
  hostStyle = {
    width: '800px',
    height: '600px'
  };
  data = [
    { Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart' },
    { Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other' },
    { Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other' },
    { Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
    { Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
    { Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store' }
  ];
  columnWidth = 100;
  workbookInit(args: { spread: GC.Spread.Sheets.Workbook; }){
    let spread:GC.Spread.Sheets.Workbook = args.spread;
    let sheet = spread.getActiveSheet();
    sheet.getCell(0,0).text("My SpreadJS Angular Project").foreColor("blue");
  }
}

使用 Angular CLI 构建和运行项目
接下来，您可以使用以下命令来构建和运行新项目：
```
ng serve
```

以下主题提供有关标记层次结构和 Spread 对象的其他信息。

注意：要在使用 Angular 的 SpreadJS 中使用 ExcelIO 元素，你需要导入 Excel IO 模块，并使用相同的许可证密钥单独对其进行授权。更多信息，请参阅 Excel IO 元素。