Angular

你可以按照以下步骤将 SpreadJS Designer 组件添加到 Angular 应用程序中：

1. 在命令提示符中输入以下命令以创建一个 Angular 项目。

   npm install -g @angular/cli
   ng new designercomponent --style css --ssr false
   cd designercomponent

2. 在项目中导入以下 SpreadJS 模块以使用 SpreadJS Designer 组件。

   npm install @grapecity-software/spread-sheets
   npm install @grapecity-software/spread-sheets-angular
   npm install @grapecity-software/spread-sheets-shapes
   npm install @grapecity-software/spread-sheets-charts
   npm install @grapecity-software/spread-sheets-slicers
   npm install @grapecity-software/spread-sheets-print
   npm install @grapecity-software/spread-sheets-formula-panel
   npm install @grapecity-software/spread-sheets-barcode
   npm install @grapecity-software/spread-sheets-pdf
   npm install @grapecity-software/spread-sheets-pivot-addon
   npm install @grapecity-software/spread-sheets-tablesheet
   npm install @grapecity-software/spread-sheets-ganttsheet
   npm install @grapecity-software/spread-sheets-reportsheet-addon
   npm install @grapecity-software/spread-sheets-languagepackages
   npm install @grapecity-software/spread-sheets-io
   npm install @grapecity-software/spread-excelio
   npm install @grapecity-software/spread-sheets-designer
   npm install @grapecity-software/spread-sheets-designer-resources-en
   npm install @grapecity-software/spread-sheets-designer-angular

3. 在 app.component.css 文件中导入 CSS 文件，使用以下代码片段。

   @import '@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
   @import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

4. 在 app.component.html 文件中添加 designer 标签，使用以下代码片段。

   <designer [props]="props"></designer>

5. 在 app.component.ts 文件中配置 designer，传递 props 参数，如下所示。

   import { Component, ViewEncapsulation } from '@angular/core';
   import * as GC from '@grapecity-software/spread-sheets';
   import "@grapecity-software/spread-sheets-shapes";
   import "@grapecity-software/spread-sheets-charts";
   import "@grapecity-software/spread-sheets-slicers";
   import "@grapecity-software/spread-sheets-print";
   import "@grapecity-software/spread-sheets-formula-panel";
   import "@grapecity-software/spread-sheets-barcode";
   import "@grapecity-software/spread-sheets-pdf";
   import "@grapecity-software/spread-sheets-pivot-addon";
   import "@grapecity-software/spread-sheets-tablesheet";
   import "@grapecity-software/spread-sheets-ganttsheet";
   import "@grapecity-software/spread-sheets-reportsheet-addon";
   import "@grapecity-software/spread-sheets-io";
   import '@grapecity-software/spread-sheets-designer-resources-en';
   import '@grapecity-software/spread-sheets-designer';
   import * as GcDesigner from '@grapecity-software/spread-sheets-designer';
   import { DesignerModule } from '@grapecity-software/spread-sheets-designer-angular';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [DesignerModule],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     encapsulation: ViewEncapsulation.None
   })
   export class AppComponent {
       designer : GCDesigner.Spread.Sheets.Designer.Designer; 
       spread : GC.Spread.Sheets.Workbook; 
       title = 'en'; 
       props = {
          stylelnfo: "width: 100%; height: 98vh; margin-top: 10px", 
          config: config,
          spreadOptions: { sheetCount: 2 }
       };
   }

6. 保存并运行应用程序。

   npm start

访问 SpreadJS 实例

你还可以通过 designerInitialized 事件访问 SpreadJS 实例。按照上面的步骤 1 到 4，然后继续：

1. 在 app.component.html 文件中为 designerInitialized 事件添加一个事件监听器，使用以下代码片段。

   <designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>

2. 更新 app.component.ts 文件，使用以下代码片段。

   export class AppComponent {
       props = {
          styleInfo: "width: 100%; height: 900px",
          config: null
       }
       afterDesignerInit(e: {designer:GCDesigner.Spread.Sheets.Designer.Designer})  {
          // 这是托管的 Spread 实例
          var workbook = e.designer.getWorkbook() as GC.Spread.Sheets.Workbook;
          var sheet = workbook.getActiveSheet();
          sheet.setValue(1, 1, 'Test');
       }
   }

3. 保存并运行应用程序。

   npm start

应用许可证

许可证版本允许你使用 SpreadJS Designer 组件的所有功能。你需要设置 SpreadJS、ExcelIO 和 Designer 组件的许可证密钥，可以使用以下代码片段。

import { Component, ViewEncapsulation } from '@angular/core';
import * as GC from '@grapecity-software/spread-sheets';
import "@grapecity-software/spread-sheets-shapes";
import "@grapecity-software/spread-sheets-charts";
import "@grapecity-software/spread-sheets-slicers";
import "@grapecity-software/spread-sheets-print";
import "@grapecity-software/spread-sheets-formula-panel";
import "@grapecity-software/spread-sheets-barcode";
import "@grapecity-software/spread-sheets-pdf";
import "@grapecity-software/spread-sheets-pivot-addon";
import "@grapecity-software/spread-sheets-tablesheet";
import "@grapecity-software/spread-sheets-ganttsheet";
import "@grapecity-software/spread-sheets-reportsheet-addon";
import "@grapecity-software/spread-sheets-io";
import '@grapecity-software/spread-sheets-designer-resources-en';
import '@grapecity-software/spread-sheets-designer';
import * as GcDesigner from '@grapecity-software/spread-sheets-designer';
import { DesignerModule } from '@grapecity-software/spread-sheets-designer-angular';

var sjsLicense = "sjs-distribution-key";
GC.Spread.Sheets.LicenseKey = sjsLicense;

(GC.Spread.Sheets as any).Designer.LicenseKey = "designer-component-distribution-key";

保存更改并再次运行应用程序。