syncfusion-javascript-spreadsheet-editor

Syncfusion JavaScript 电子表格编辑器

概述

此技能可帮助开发者生成 TypeScript 代码，以便在 JavaScript 应用中集成 Syncfusion 电子表格编辑器。它提供可直接使用的代码片段、API 指南和最佳实践，助力在 JavaScript（ES6）项目中构建类似 Excel 的功能。

核心功能

• 文件操作： 导入/导出 Excel 文件（xlsx、xls、xlsb）、CSV 文件，以及导出 PDF
• 数据管理： 数据绑定、编辑、排序、筛选和验证
• 单元格操作： 格式设置（字体、颜色、边框、对齐方式）、合并单元格、自动换行
• 公式与计算： 内置 Excel 公式、自定义函数、命名范围
• 协作： 笔记、评论和串联讨论
• 高级功能： 图表、图像、超链接、条件格式、冻结窗格、工作表保护，以及适用于大型数据集的虚拟化

快速入门示例

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

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

结果： 生成一段 TypeScript 代码，将提供的数据载入电子表格并应用基本单元格格式。

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

用户： "创建一个电子表格，并在启动时加载 Excel 文件"

结果： 生成一段 TypeScript 代码，用于初始化电子表格并在启动时以编程方式打开 Excel 文件。

入门指南 — 最简 JavaScript（ES6）代码

适用于普通 Web 项目的最简 JavaScript（ES6）配置：

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

const spreadsheet = new Spreadsheet({
  sheets: [{ rows: [{ cells: [{ value: 'Hello, Spreadsheet!' }] }] }],
  created: () => {
    // All post-initialization code goes here
  }
});
spreadsheet.appendTo('#spreadsheet');

占位符：

• #spreadsheet — 组件渲染所在的 HTML 元素 ID
• sheets — 包含数据的工作表对象数组

---

为用户的项目生成 TypeScript 代码

触发关键词： "javascript 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"

工作流：

1. 确定用户请求的电子表格功能（数据绑定、公式、图表、导出等）。

2. 阅读相关的 references/*.md 文件，了解所请求功能对应的 API 和代码模式。

   • 对于创建、初始化、渲染、软件包配置、CSS 配置或基本电子表格请求，请先阅读 references/getting-started.md。

3. 在生成代码、安装软件包、创建文件或修改项目文件之前停止。 检查用户是否已经选择交付方式。

4. 如果尚未选择交付方式，必须先使用以下简洁的单选题询问用户：

   "您希望如何接收生成的电子表格代码？"

   • 选项 1： 替换特定项目文件中的代码（需要提供文件路径并确认）
   • 选项 2： 将代码保存到此技能的输出文件夹 {skill-root}/syncfusion-javascript-spreadsheet-editor/output/app.ts
   • 选项 3： 直接在聊天窗口中分享代码

5. 如果用户选择 选项 1，请在生成或替换代码前验证提供的项目文件／文件夹路径。

   • 如果提供的路径是一个现有 JavaScript／TypeScript 项目，且其中包含 package.json，则继续执行之前的操作。
   • 如果提供的路径是空文件夹，或不包含 JavaScript／TypeScript 项目，则不要编辑文件，也不要结束聊天。
   • 说明替换项目文件前需要先有 JavaScript／TypeScript 项目。
   • 询问用户是否想先使用 references/getting-started.md 设置／安装 JavaScript／TypeScript 项目。
   • 除非用户明确确认，否则不要创建项目文件、安装软件包或运行设置命令。

6. 只有在用户选择交付方式且完成选项 1 的路径验证后，才能使用 references/*.md 中的 API 和代码片段生成 TypeScript 代码，并根据用户的项目替换具体占位符。

7. 在 created 事件处理程序中实现所有代码——所有代码实现都应放在 Spreadsheet 的 created 事件中，除非用户明确要求使用其他事件处理程序（例如 beforeSave、cellSave 等）。

8. 除非用户明确选择了选项 1、提供了有效的 JavaScript／TypeScript 项目文件／文件夹路径并给予许可，否则不得更改工作区项目文件。

9. 如果未检测到 JavaScript／TypeScript 项目或 package.json，请说明需要先有 JavaScript／TypeScript 项目，并提供 references/getting-started.md 中的设置指南。除非用户明确要求创建 JavaScript／TypeScript 项目并给予许可，否则不要创建项目文件、安装软件包或运行设置命令。

10. 只有在用户明确要求时，才创建新的 JavaScript／TypeScript 应用／项目，例如：

• “创建一个 JavaScript 应用并渲染 Spreadsheet”
• “创建一个带有 Spreadsheet 的 TypeScript 应用”
• “创建一个 Webpack／TypeScript 应用并添加 Spreadsheet”

如果用户只是要求创建、添加、渲染或配置 Spreadsheet 控件，则不要搭建新的 JavaScript／TypeScript 应用。应将其视为针对现有项目的 Spreadsheet 控件／代码生成请求。 11. 为现有 JavaScript／TypeScript 项目生成代码时，请提供 references/getting-started.md 中所需的软件包和 CSS 配置指南。 12. 交付代码后，请提供完整的 TypeScript 代码片段和简洁的集成步骤。

有关操作限制（输出目录、临时文件、允许使用的库等），请参阅 ## Rules 部分。

代码参考

所有代码片段和示例都位于 references/ 文件夹中。每个文件包含：

• 最简 TypeScript 代码 — 可正常运行、可直接使用的代码片段
• 占位符 — 用户必须自定义的值
• 说明 — TypeScript 最佳实践和限制

文件	主题
getting-started.md	项目设置、安装软件包、CSS 引用、基本渲染和初始数据绑定
data-binding.md	本地数组、JSON、远程数据（DataManager）
formulas.md	公式、汇总、命名范围
formatting.md	单元格格式、边框、自动换行
rich-text-formatting.md	富文本片段、混合样式、下标/上标
number-formatting.md	数字格式、小数、货币、日期
conditional-formatting.md	规则、基于条件的突出显示、基于公式的规则
data-validation.md	验证规则、无效内容突出显示
sorting-filtering.md	排序、筛选
find-replace.md	查找、替换
import-export.md	保存（XLSX/CSV/PDF）、打开、openFromJson
charts.md	插入、编辑、删除图表
images.md	插入、修改图片
hyperlink.md	添加、移除超链接
comments.md	线程式批注、回复、解决讨论串
notes.md	简单的单元格备注、便笺可见性、添加/编辑/删除
protection.md	工作表保护、单元格锁定、权限
edit-cell.md	startEdit、endEdit、updateCell、编辑模式
freeze-panes.md	冻结行/列、拆分窗格
row-column.md	插入、删除、调整行/列大小、隐藏
merge-cells.md	合并、取消合并单元格、跨越单元格
print.md	页面设置、页眉/页脚、缩放、边距
misc-operations.md	自动填充、清除、工作表管理、goTo
clipboard.md	使用不同粘贴类型进行复制、剪切、粘贴
selection.md	选择单元格/范围、多选、getSelectedRange
scrolling-virtualization.md	虚拟滚动、大型数据集、性能
wrap.md	文本换行、多行显示、行高
defined-names.md	命名范围、定义名称、refersTo 格式
custom-functions.md	自定义计算函数、addCustomFunction
ribbon-customization.md	Ribbon 选项卡、工具栏项目、文件菜单自定义
context-menu.md	右键上下文菜单、contextMenuBeforeOpen
localization.md	多语言、区域设置、RTL、数字/日期格式
events.md	事件处理、事件属性、事件模式
autofill.md	自动填充模式、填充类型、序列
collaborative-editing.md	实时协作编辑、共享工作簿同步、在线状态指示器

代码生成关键规则（TypeScript 优先）

1. TypeScript 优先的代码片段 — 所有示例和代码片段都必须使用 TypeScript 编写，并能通过当前的 @syncfusion/ej2-spreadsheet npm 包编译。

2. 本清单中不得包含内联代码 — 可运行的代码片段请参阅 references/*.md；本文件仅作为简明的规则和索引。

3. 默认事件作用域 — 除非用户明确要求在其他事件（例如 beforeSave、cellSave 等）中实现，否则所有实现都必须放在 Spreadsheet 的 created 事件处理程序中。这样可确保所有操作都在 Spreadsheet 组件完全初始化后执行。

4. 参考文件要求 — 每个参考文件都必须包含：

   • 最简 TypeScript 代码（完整且可运行）
   • 占位符（明确标示需要替换的值）
   • 备注（TypeScript 集成步骤和最佳实践）

5. 许可证处理 — 不要将许可证密钥硬编码；请引导用户使用环境变量或项目配置。

6. 保持数据完整性 — 生成或编辑工作表时，保留现有公式、引用和格式。

7. 不得虚构 API — 仅使用经过验证的 Syncfusion Spreadsheet Editor 方法名称。

8. 先阅读参考文件 — 对于任何用户请求的功能，在生成代码前始终先阅读相关的 references/*.md 文件。

9. 严格依据参考文件进行构建 — TypeScript 代码必须严格基于参考文件中提供的 API、方法、属性、事件和代码片段进行构建。不得发明、猜测或建议参考文件中未明确列出的任何 API、方法、属性或事件。

规则

• 当用户选择选项 2 时，输出文件必须放在 {skill-root}/syncfusion-javascript-spreadsheet-editor/output/ 目录中
• 仅使用 Syncfusion Spreadsheet API — 切勿推荐或使用其他电子表格库（例如 handsontable、ag-grid、luckysheet）
• 不得创建临时文件 — 切勿在输出目录之外创建临时脚本、中间文件或脚手架文件
• 仅使用 TypeScript 编写代码 — 所有生成的代码都必须是有效的 TypeScript，切勿生成原生 JavaScript、jQuery 或特定于框架的代码模式
• 选项 1 路径验证： 用户选择选项 1 时，在编辑或替换文件前，始终验证所提供的项目文件/文件夹路径。
  • 如果该路径包含带有 package.json 的现有 JavaScript/TypeScript 项目，请继续正常的代码替换流程。
  • 如果路径为空，或不包含 JavaScript/TypeScript 项目，则不要编辑文件，也不要结束对话。
  • 你必须提出后续问题，而不是就此停止。
  • 说明替换项目文件前必须先有一个 JavaScript/TypeScript 项目。
  • 询问用户是否需要设置指导，或是否想先使用 references/getting-started.md 设置/安装 JavaScript/TypeScript 项目。
  • 除非用户明确确认，否则不要自动创建项目文件、安装包或运行设置命令。
• JavaScript/TypeScript 应用创建限制： 仅当用户明确要求创建项目时，才创建或搭建新的 JavaScript/TypeScript 应用，例如“创建一个 JavaScript 应用并渲染 Spreadsheet”或“创建一个 Webpack/TypeScript 应用并添加 Spreadsheet”。对于“创建一个包含数据的电子表格”或“添加 Spreadsheet”之类的常规请求，应将其视为针对现有 JavaScript/TypeScript 项目生成控制代码。