syncfusion-angular-spreadsheet-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Angular Spreadsheet Editor

Syncfusion Angular 电子表格编辑器

Overview

概述

This skill helps developers generate Angular code for integrating the Syncfusion Spreadsheet Editor into their applications. It provides ready-to-use code snippets, API guidance, and best practices for building Excel-like functionality in Angular projects.

此技能可帮助开发者生成将Syncfusion Spreadsheet Editor集成到Angular应用中的代码，提供即用型代码片段、API指南以及在Angular项目中构建类Excel功能的最佳实践。

Key Capabilities

核心功能

File Operations: Import/export Excel files (
```
xlsx
```
,
```
xls
```
,
```
xlsb
```
), CSV files, and PDF export
Data Management: Data binding, editing, sorting, filtering, and validation
Cell Operations: Formatting (fonts, colors, borders, alignment), merge cells, wrap text
Formulas & Calculations: Built-in Excel formulas, custom functions, named ranges
Collaboration: Notes, comments, and threaded discussions
Advanced Features: Charts, images, hyperlinks, conditional formatting, freeze panes, sheet protection, virtualization for large datasets

文件操作： 导入/导出Excel文件（
```
xlsx
```
、
```
xls
```
、
```
xlsb
```
）、CSV文件，以及导出为PDF
数据管理： 数据绑定、编辑、排序、筛选和验证
单元格操作： 格式设置（字体、颜色、边框、对齐方式）、合并单元格、文本换行
公式与计算： 内置Excel公式、自定义函数、命名区域
协作功能： 备注、评论和线程式讨论
高级功能： 图表、图片、超链接、条件格式、冻结窗格、工作表保护、大数据集虚拟化

Quick Start Examples

快速入门示例

Example 1: Generate Spreadsheet with Formatting

示例1：生成带格式的电子表格

User: "Create a Spreadsheet with data and apply cell styles"

Result: An Angular component code snippet is generated that loads provided data into the Spreadsheet and applies basic cell formatting.

用户需求： "创建一个包含数据并应用单元格样式的电子表格"

输出结果： 生成Angular组件代码片段，将指定数据加载到电子表格中并应用基础单元格格式。

Example 2: Generate Code for Loading a File

示例2：生成加载文件的代码

User: "Create a Spreadsheet and load an Excel file initially"

Result: An Angular component code snippet is generated that initializes the Spreadsheet and programmatically opens an Excel file on startup.

用户需求： "创建一个电子表格并在初始化时加载Excel文件"

输出结果： 生成Angular组件代码片段，初始化电子表格并在启动时以编程方式打开Excel文件。

Getting Started — Minimal Angular Code

快速开始——最简Angular代码

Minimal Angular setup using Standalone Component (Angular 14+):

app.ts

typescript

import { Component, ViewChild } from '@angular/core';
import { SpreadsheetAllModule, SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SpreadsheetAllModule],
  template: `
    <ejs-spreadsheet #spreadsheet (created)="created()">
      <e-sheets>
        <e-sheet>
          <e-rows>
            <e-row>
              <e-cells>
                <e-cell value="Hello, Spreadsheet!"></e-cell>
              </e-cells>
            </e-row>
          </e-rows>
        </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
  `
})
export class AppComponent {
  @ViewChild('spreadsheet') spreadsheet!: SpreadsheetComponent;

  created(): void {
    // All post-initialization code goes here
  }
}

Placeholders:

```
#spreadsheet
```
— Angular template reference variable for the component
```
<e-sheets>
```
— declarative sheet definitions with rows and cells
```
created()
```
— event handler called after the Spreadsheet is fully initialized

Note: Always import

SpreadsheetAllModule

in the

imports

array of the standalone component for all features to work correctly.

使用独立组件（Angular 14+）的最简Angular配置：

app.ts

typescript

import { Component, ViewChild } from '@angular/core';
import { SpreadsheetAllModule, SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SpreadsheetAllModule],
  template: `
    <ejs-spreadsheet #spreadsheet (created)="created()">
      <e-sheets>
        <e-sheet>
          <e-rows>
            <e-row>
              <e-cells>
                <e-cell value="Hello, Spreadsheet!"></e-cell>
              </e-cells>
            </e-row>
          </e-rows>
        </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
  `
})
export class AppComponent {
  @ViewChild('spreadsheet') spreadsheet!: SpreadsheetComponent;

  created(): void {
    // 所有初始化后代码请写在这里
  }
}

占位符说明：

```
#spreadsheet
```
—— 组件的Angular模板引用变量
```
<e-sheets>
```
—— 声明式工作表定义，包含行和单元格
```
created()
```
—— 电子表格完全初始化后调用的事件处理器

注意： 为确保所有功能正常工作，请务必在独立组件的

imports

数组中导入

SpreadsheetAllModule

。

Generate Angular Code for the User's Project

为用户项目生成Angular代码

Trigger keywords: "angular spreadsheet", "spreadsheet editor", "syncfusion spreadsheet", "excel component", "load excel file", "open excel file", "import excel", "export excel file", "save excel", "export to pdf", "export to csv", "view excel", "configure spreadsheet", "create spreadsheet", "add spreadsheet", "spreadsheet data", "cell formatting", "apply formulas", "insert chart", "data binding", "spreadsheet validation", "freeze panes", "protect sheet"

Workflow:

Identify the requested Spreadsheet feature (data binding, formulas, charts, export, etc.).
Read the relevant
```
references/*.md
```
file(s) to understand the APIs and code patterns for the requested feature.
STOP before generating code. Check if the user has already chosen a delivery mode.
If no delivery mode is chosen yet, you MUST ask the user first using this concise multiple-choice question:

"How would you like to receive the generated Spreadsheet code?"
- Option 1: Replace the code in a specific project file (you'll need to provide the file path and confirm)
- Option 2: Save the code in this skill's output folder at
```
{skill-root}/syncfusion-angular-spreadsheet-editor/output/app.ts
```
  (and related files)
- Option 3: Share the code directly in the chat window
Only after the user selects a delivery mode, proceed to generate Angular code using the APIs and snippets from
```
references/*.md
```
, substituting concrete placeholders from the user's project.
Scope implementations within the
created
event handler — All code implementations should be placed within the Spreadsheet's
```
created
```
event unless the user explicitly requests a different event handler (e.g.,
```
beforeSave
```
,
```
cellSaving
```
, etc.).
Do NOT make changes to workspace project files unless the user explicitly chose Option 1 and provided the file path with permission.
Provide complete Angular snippets and concise integration steps after delivering the code.

Refer to
## Rules
section for operational constraints (output directory, temporary files, allowed libraries, etc.)

触发关键词： "angular spreadsheet"、"spreadsheet editor"、"syncfusion spreadsheet"、"excel component"、"load excel file"、"open excel file"、"import excel"、"export excel file"、"save excel"、"export to pdf"、"export to csv"、"view excel"、"configure spreadsheet"、"create spreadsheet"、"add spreadsheet"、"spreadsheet data"、"cell formatting"、"apply formulas"、"insert chart"、"data binding"、"spreadsheet validation"、"freeze panes"、"protect sheet"

工作流程：

识别用户请求的电子表格功能（数据绑定、公式、图表、导出等）。
阅读相关
```
references/*.md
```
文件，了解对应功能的API和代码模式。
生成代码前请暂停，检查用户是否已选择交付方式。
若用户未选择交付方式，必须先通过以下简洁的选择题询问用户：

“你希望以哪种方式接收生成的电子表格代码？”
- 选项1： 替换指定项目文件中的代码（需提供文件路径并确认）
- 选项2： 将代码保存至本技能的输出目录
```
{skill-root}/syncfusion-angular-spreadsheet-editor/output/app.ts
```
  （及相关文件）
- 选项3： 在聊天窗口中直接分享代码
仅在用户选择交付方式后，再使用
```
references/*.md
```
中的API和代码片段生成Angular代码，并替换为用户项目中的具体占位符。
将实现代码限定在
created
事件处理器中——除非用户明确要求其他事件处理器（如
```
beforeSave
```
、
```
cellSaving
```
等），否则所有代码实现都应放在电子表格的
```
created
```
事件内。
请勿修改工作区项目文件，除非用户明确选择选项1并提供了带权限的文件路径。
交付代码后，提供完整的Angular代码片段和简洁的集成步骤。

请参考
## 规则
部分了解操作约束（输出目录、临时文件、允许使用的库等）

Code References

代码参考

All code snippets and examples are in the

references/

folder. Each file contains:

Minimal Angular Code — a working, ready-to-use snippet
Placeholders — values the user must customize
Notes — Angular best practices and constraints

File	Topic
initialization.md	Basic Angular setup and options
data-binding.md	Local arrays, JSON, remote (DataManager)
formulas.md	Formulas, aggregates, named ranges
formatting.md	Cell formatting, borders, wrap text
number-formatting.md	Number formatting, decimals, currency, date
conditional-formatting.md	Rules, highlights based on conditions
data-validation.md	Validation rules, invalid highlights
sorting-filtering.md	Sorting, filtering
find-replace.md	Find, replace
import-export.md	Save (XLSX/CSV/PDF), open, openFromJson
charts.md	Insert, edit, delete charts
images.md	Insert, modify pictures
hyperlink.md	Add, remove hyperlinks
comments.md	Threaded comments, replies, resolve threads
notes.md	Simple cell notes, sticky visibility, add/edit/delete
protection.md	Sheet protection, cell locking, permissions
edit-cell.md	startEdit, endEdit, updateCell, edit modes
freeze-panes.md	Freeze rows/columns, split panes
row-column.md	Insert, delete, resize rows/columns, hide
merge-cells.md	Merge, unmerge cells, spanning
print.md	Page setup, headers/footers, scaling, margins
misc-operations.md	Autofill, clear, sheet management, goTo
clipboard.md	Copy, cut, paste with different paste types
selection.md	Select cells/ranges, multi-select, getSelectedRange
scrolling-virtualization.md	Virtual scrolling, large datasets, performance
wrap.md	Text wrapping, multi-line display, row height
defined-names.md	Named ranges, define names, refersTo format
custom-functions.md	Custom calculation functions, addCustomFunction
ribbon-customization.md	Ribbon tabs, toolbar items, file menu customization
context-menu.md	Right-click context menu, contextMenuBeforeOpen
localization.md	Multi-language, locale, RTL, number/date formats
events.md	Event handling, event properties, event patterns
autofill.md	Autofill patterns, fill types, series

所有代码片段和示例均位于

references/

文件夹中，每个文件包含：

最简Angular代码——可直接运行的代码片段
占位符——用户需自定义的值
说明——Angular最佳实践和约束

文件名称	主题内容
initialization.md	基础Angular配置和选项
data-binding.md	本地数组、JSON、远程数据（DataManager）绑定
formulas.md	公式、聚合函数、命名区域
formatting.md	单元格格式、边框、文本换行
number-formatting.md	数字格式、小数、货币、日期
conditional-formatting.md	条件格式规则、高亮显示
data-validation.md	数据验证规则、无效内容高亮
sorting-filtering.md	排序、筛选
find-replace.md	查找、替换
import-export.md	保存（XLSX/CSV/PDF）、打开、从JSON加载
charts.md	插入、编辑、删除图表
images.md	插入、修改图片
hyperlink.md	添加、移除超链接
comments.md	线程式评论、回复、标记已解决
notes.md	单元格备注、显示/隐藏、增删改操作
protection.md	工作表保护、单元格锁定、权限设置
edit-cell.md	开始编辑、结束编辑、更新单元格、编辑模式
freeze-panes.md	冻结行/列、拆分窗格
row-column.md	插入、删除、调整行列大小、隐藏行列
merge-cells.md	合并、取消合并单元格、跨区域合并
print.md	页面设置、页眉/页脚、缩放、边距
misc-operations.md	自动填充、清除内容、工作表管理、定位
clipboard.md	复制、剪切、粘贴（支持多种粘贴类型）
selection.md	选择单元格/区域、多选、获取选中区域
scrolling-virtualization.md	虚拟滚动、大数据集、性能优化
wrap.md	文本换行、多行显示、行高调整
defined-names.md	命名区域、定义名称、引用格式
custom-functions.md	自定义计算函数、addCustomFunction方法
ribbon-customization.md	功能区选项卡、工具栏项、文件菜单自定义
context-menu.md	右键上下文菜单、contextMenuBeforeOpen事件
localization.md	多语言、区域设置、RTL、数字/日期格式
events.md	事件处理、事件属性、事件模式
autofill.md	自动填充模式、填充类型、序列

Key Rules for Code Generation (Angular-first)

代码生成核心规则（Angular优先）

Angular-first snippets — All examples and snippets must be written in Angular (TypeScript with inline template) and compile with the current
```
@syncfusion/ej2-angular-spreadsheet
```
npm package.
No inline code in this manifest — Refer to
```
references/*.md
```
for runnable snippets; keep this file as the concise policy and index.
Default event scoping — All implementations must be placed within the Spreadsheet's
```
created
```
event handler unless the user explicitly requests implementation in another event (e.g.,
```
beforeSave
```
,
```
cellSaving
```
, etc.). This ensures all operations occur after the Spreadsheet component is fully initialized.
Standalone component — Always use
```
standalone: true
```
with
```
imports
```
array inside the component. Never generate
```
NgModule
```
or
```
app.module.ts
```
or
```
app.component.css
```
based code.
Reference file requirements — Each reference must include:
- Minimal Angular Code (complete, runnable — standalone component with inline template)
- Placeholders (clearly marked values to replace)
- Notes (Angular integration steps and best practices)
License handling — Do not hardcode license keys; refer users to env variables or project config.
Preserve data integrity — Preserve existing formulas, references, and formatting when generating or editing sheets.
No hallucinated APIs — Use verified Syncfusion Spreadsheet Editor method names only.
Read references first — For any requested feature, always read the relevant
```
references/*.md
```
file(s) first before generating code.
Build strictly from references — Build Angular code strictly from the APIs, methods, properties, events, and snippets found in the reference files. Do NOT invent, guess, or suggest any API, method, property, or event not explicitly present in the reference files.

Angular优先代码片段——所有示例和代码片段必须采用Angular（TypeScript+内联模板）编写，且可与当前
```
@syncfusion/ej2-angular-spreadsheet
```
npm包兼容编译。
此清单中无内联代码——请参考
```
references/*.md
```
获取可运行的代码片段，本文件仅作为简明策略和索引。
默认事件范围——所有实现必须放在电子表格的
```
created
```
事件处理器中，除非用户明确要求其他事件（如
```
beforeSave
```
、
```
cellSaving
```
等）。这确保所有操作在电子表格组件完全初始化后执行。
独立组件——始终使用
```
standalone: true
```
，并在组件的
```
imports
```
数组中导入相关模块。请勿生成基于
```
NgModule
```
、
```
app.module.ts
```
或
```
app.component.css
```
的代码。
参考文件要求——每个参考文件必须包含：
- 最简Angular代码（完整可运行的独立组件+内联模板）
- 占位符（明确标记需替换的值）
- 说明（Angular集成步骤和最佳实践）
许可证处理——请勿硬编码许可证密钥，请引导用户使用环境变量或项目配置。
数据完整性保护——生成或编辑工作表时，保留现有公式、引用和格式。
禁止虚构API——仅使用已验证的Syncfusion Spreadsheet Editor方法名称。
先阅读参考文件——对于任何请求的功能，必须先阅读相关
```
references/*.md
```
文件，再生成代码。
严格基于参考文件构建——仅使用参考文件中明确列出的API、方法、属性、事件和代码片段构建Angular代码。请勿发明、猜测或建议参考文件中未明确提及的任何API、方法、属性或事件。

Rules

通用规则

Output files must go in

{skill-root}/syncfusion-angular-spreadsheet-editor/output/

directory when user selects Option 2

Only use Syncfusion Spreadsheet APIs — never recommend or use alternative spreadsheet libraries (e.g., handsontable, ag-grid, luckysheet)
No temporary files — never create temporary scripts, intermediate files, or scaffolding outside the output directory
Angular-only code — all generated code must be valid Angular (TypeScript + HTML template), never generate vanilla JavaScript, jQuery, or non-Angular patterns

输出文件：当用户选择选项2时，文件必须保存到
```
{skill-root}/syncfusion-angular-spreadsheet-editor/output/
```
目录
仅使用Syncfusion Spreadsheet API——绝不推荐或使用其他电子表格库（如handsontable、ag-grid、luckysheet）
无临时文件——绝不创建输出目录外的临时脚本、中间文件或脚手架
仅Angular代码——所有生成的代码必须是有效的Angular代码（TypeScript+HTML模板），绝不生成原生JavaScript、jQuery或非Angular模式的代码