在 Angular 中使用 SpreadJS

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

type=warning
注意： SpreadJS 支持 Angular 版本 11、12、13、14 和 15。
Angular 版本 13 已经移除了对 IE11 的支持。

使用节点包管理器

此方法包括以下步骤：

全局安装 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/spread-sheets
npm install @grapecity/spread-sheets-angular
```

在 angular.json 中配置 SpreadJS CSS

现在，您可以在 angular.json 中配置 SpreadJS CSS，如下所示：

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

在 Angular 应用程序中使用 SpreadJS。

现在，您可以修改 app.module.ts 以导入 SpreadJS 模块，如下所示：

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

修改 app.component.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.component.ts 为 SpreadJS 组件准备数据，如下所示：

import { Component } from '@angular/core';
import * as GC from "@grapecity/spread-sheets";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.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 对象的其他信息。