在 Angular CLI 中使用 SpreadJS
SpreadJS 支持在 Angular CLI 开发环境中一起使用单独的模块和插件。
使用模块与插件*
包含以下步骤:
全局安装 Angular CLI
打开命令提示符窗口并键入以下命令。
npm install -g @angular/cli使用 Angular CLI 创建一个新项目
使用以下命令创建一个新项目并导航到项目目录：
ng new my-app cd my-app在项目中安装SpreadJS模块和插件
使用以下命令安装 SpreadJS NPM 模块和插件：
npm install @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-print @grapecity-software/spread-sheets-angular在 angular.json 中配置 SpreadJS CSS
在 angular.json 中配置 SpreadJS CSS，如下所示：
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "my-app": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/my-app", "index": "src/index.html", "main": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css", "./node_modules/@grapecity-software/spread-common/styles/gc.spread.sheets.excel2016colorful.css" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "my-app:build:production" }, "development": { "browserTarget": "my-app:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "my-app:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] } } } } } }在 Angular 应用程序中使用 SpreadJS
修改app.module.ts以导入模块，如下所示：
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { SpreadSheetsModule } from '@grapecity-software/spread-sheets-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, SpreadSheetsModule ], providers: [], b ootstrap: [AppComponent]}) export class AppModule { }修改app.component.html以查看SpreadJS组件，如下所示：
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> </gc-spread-sheets>修改app.component.ts为SpreadJS组件准备数据，如下所示：
import { Component } from '@angular/core';i mport * as GC from "@grapecity-software/spread-common"; import "@grapecity-software/spread-calc-engine"; import "@grapecity-software/spread-sheets-core"; import "@grapecity-software/spread-sheets-calc-engine"; import "@grapecity-software/spread-sheets-print"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { hostStyle = { width: '100%', height: '600px', overflow: 'hidden', float: 'left' }; initSpread($event: any) { let spread: GC.Spread.Sheets.Workbook = $event.spread; let sheet = spread.getActiveSheet(); sheet.setValue(0, 0, "Hello SpreadJS"); spread.print(); } }修改 tsconfig.json 以添加compilerOptions的路径，如下所示：
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, "lib": [ "ES2022", "dom" ], "paths": { "@grapecity-software/spread-sheets": [ "node_modules/@grapecity-software/spread-common" ] } }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } }使用 Angular CLI 构建并运行项目
使用以下命令构建并运行项目：
npm start