SpreadJS 产品文档
SpreadJS 文档 / 开发者指南 / JavaScript 框架 /在Angular中使用 SpreadJS
在本主题中
    在Angular中使用 SpreadJS
    在本主题中

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

    使用节点包管理器

    使用节点包管理器:

    1. 全局安装Angular CLI

      打开命令提示符窗口,然后键入以下命令:

      npm install -g @angular/cli
         
    2. 使用Angular CLI创建一个新项目

      接下来,您需要使用以下命令创建一个新项目:

      ng new spread-sheets-angular-cli
         
    3. 下载SpreadJS Npm包

      现在,您可以使用以下命令安装SpreadJS Npm软件包:

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

    4. 在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"
                  ],
                  ...
                }
                ...
              }
              ...
            }
            ...
          }
        }
        ...
      }

    5. 在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 { }

      Now, you can modify the app.component.html for viewing the SpreadJS component as shown below:

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

      Now, you can modify the app.component.ts for preparing data for SpreadJS component as shown below:

      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){
          let spread:GC.Spread.Sheets.Workbook = args.spread;
          let sheet =  spread.getActiveSheet();
          sheet.getCell(0,0).text("My SpreadJS Angular Project").foreColor("blue");
        }
      }                     

    6. 使用Angular CLI构建和运行项目

      接下来,您可以使用以下命令来构建和运行新项目:

      ng serve
         

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

    1. 标签层次
    2. Worksheet元素
    3. Worksheet元素
    4. 列元素