offline-office-editor

Polar Sponsor
爱发电 赞助
.NET 9.0

用于构建和维护单文件、完全离线的 Office 编辑器(Excel / Word / PowerPoint)的可复用模式,纯 JavaScript 实现,无需服务器。在为 `C:/office` 项目添加或修复功能时,或在任何需要离线生成或编辑 `.xlsx` / `.docx` / `.pptx` 文件的任务中使用该技能——尤其适用于条件格式、公式、批注、数据验证、图表、超链接、冻结窗格,以及行/列结构等场景——其底层基于 SheetJS,并在其之上构建了一层手工编写的 OOXML 注入与读取后处理逻辑

离线编辑器 : Overview.

功能概述

离线编辑器 : Overview.是一项面向实际任务的技能,主要用于C:/office project 是单页,零后端的编辑器. : 3 编辑器 : (Excel graph, Word page, PPT stage) 共享一个索引.html + 每个格式的引擎. (exce)。它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。

核心要点

  • 使用时应结合输入条件选择合适的执行方式,核对必要参数、依赖环境与输出内容,并按原始要求处理异常情况。
  • 从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
  • 实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;

使用与执行

若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;

结果检查与注意事项

涉及批量任务时,还应保存进度,避免中断后重复操作。该技能适合用于一次性任务,也可以接入自动化工作流,与其他技能或上层代理配合完成更完整的业务链路;在组合使用时,应明确每一步的输入输出关系,并避免不同步骤之间出现参数冲突。

离线 Office 编辑器

概述

C:/office 项目是一个单页、零后端的 Office 编辑器。三个编辑器(Excel 表格视图、Word 页面视图、PPT 幻灯片舞台)共享同一个 index.html 文件,以及按格式划分的独立引擎(excel.js、word.js、ppt.js)。构建流程会将所有依赖库与脚本内联进 office-standalone.html(约 5.7 MB),使其可直接双击运行——无需服务器、无需 CDN、无需网络连接。

难点不在于 UI 实现,而在于确保 Excel/Word/PPT 文件能正确往返转换(round-trip)。SheetJS(libs/xlsx.full.min.js)负责读写 ZIP/XML 格式,但会静默丢弃大量功能(条件格式、批注、数据验证、图表、样式、冻结窗格、超链接)。本项目的解决方案是引入一层 OOXML 后处理机制:SheetJS 生成基础文件,再由若干轻量级 injectXxx 函数重写特定 XML 片段(如 worksheet、rels、[Content_Types].xml),以补全 SheetJS 遗漏的内容;对应的反向 readXxx 函数则在打开文件时解析这些片段,并还原至 JS 数据结构中。该机制的行为一致性由基于 jsdom 的回归测试套件保障——它加载真实引擎并断言其行为。

何时使用此技能

  • 用户要求为 C:/office 编辑器添加或修复任意功能。
  • 任何需在 离线环境 下生成或编辑 .xlsx / .docx / .pptx 文件的任务,尤其包括: 条件格式(色阶、数据条、公式/单元格规则)、公式引擎(绝对引用、跨表引用、VLOOKUP/HLOOKUP/MATCH/INDEX/IFS)、单元格批注、数据验证、图表、超链接、冻结窗格、行列插入/删除、合并单元格、自定义样式。
  • 编写或调试上述功能对应的 jsdom 回归测试。

核心架构(编辑前请务必阅读)

请始终维持统一的心智模型——该模型对所有功能均适用:

  • 单一可信数据源 = 纯 JS 数据结构,而非 OOXML。 对于 Excel: data 是一个二维数组(ROWS × COLS);其余所有信息均以并行 Map 或数组形式存储,键为 r + ',' + c(按单元格:如 styleMap、fmtMap、commentMap、borderMap、hyperlinks),或以区域范围/{r1,c1,r2,c2} 为键(如条件格式 cfRules、数据验证 dvRules、合并单元格)。Word/PPT 使用类似的 sheets[]/elements[] 结构。
  • 编辑器从这些结构渲染界面(如 renderCell、renderAll)。文件格式仅是这些结构的 序列化结果,绝非原始数据源。
  • 两个链式函数管控文件边界:
    • 保存:由 buildAndSaveBuffer() → 输出 Blob。功能逻辑实现在 injectXxx(zip, sheetsArr) 辅助函数中(参见 references/ooxml_paradigm.md)。
    • 打开:由 openWorkbook(buf) → 先通过 SheetJS 读取单元格值,再调用 readXxx(buf) 辅助函数,将被丢弃的功能恢复至 JS 结构中。
  • 测试/调试钩子: window.__excelDeep 暴露了内部方法(如 setCellValue、getCfRules、addCfRule、cfMatchCell、renderAll、saveToBuffer、openWorkbook、evaluate 等)。jsdom 测试套件正是驱动这些接口,在无浏览器环境下验证真实引擎行为。

工作流:为 Excel 添加新功能

  1. 建模。 将字段加入对应单元格的 Map,或加入 cfRules/dvRules/sheets[] 中。首先确定内存中的数据结构(例如,一条条件格式规则为 {r1,c1,r2,c2,type,...})。
  2. 渲染。 在 renderCell/renderAll 中实现(并在 styles.css 中添加必要 CSS)。文本内容必须始终位于覆盖层元素之上——为 .cell-input 设置 position:relative; z-index:1,覆盖层(如 cf-bar、标记等)则设更低 z-index 并启用 pointer-events:none。
  3. 导出。 编写 injectXxx 函数重写对应 OOXML 片段,并将其接入 buildAndSaveBuffer 中正确的 CT_Worksheet 子节点顺序位置。
  4. 导入。 编写 readXxx 函数解析同一 OOXML 片段,并接入 openWorkbook(需包裹在 try/catch 中——缺失部分不可导致打开失败)。
  5. 暴露调试钩子。 在 window.__excelDeep 上挂载对应方法,供测试套件设置和读取状态。
  6. 编写回归测试。 新建 _excel__test.js(参见 references/regression_harness.md 和 scripts/regression_harness.js)。
  7. 重新构建 + 冒烟测试: 运行 node build-standalone.js,再执行 _standalone_smoke.js,确认无加载时错误(0 errors)。

OOXML inject/read 范式(最易被忽视的核心)

这是最具复用价值的知识点。完整代码模式、buffer 类型规则、[Content_Types].xml 覆盖机制、rels 关联方式,以及一个带注释的条件格式示例,全部详述于 references/ooxml_paradigm.md。在编写任意 injectXxx/readXxx 函数前,请务必通读该文档。关键规则(不可跳过):

  • 注入器(injector)接收一个 JSZip 实例,返回一个 arraybuffer(不是 Blob),以便下一个注入器可通过 JSZip.loadAsync 加载。仅最终的 buildAndSaveBuffer 会将最后一个 buffer 包裹为 new Blob([out])。
  • 往返传输公式或任何含 <、>、&、" 的文本时(例如条件格式公式中的 >A1>10<),必须成对使用 escapeXml 与 unescapeXml。
  • 内存模型类型名必须与 OOXML 类型名严格区分。 示例:内存中条件格式规则使用 type:'scale'|'bar'|'formula',而 OOXML 中对应为 。双向映射必须准确;若不匹配,规则将在保存时被静默丢弃。
  • 调用 XLSX.write(..., {cellStyles:true}) 后,再对返回的 arraybuffer 执行 JSZip.loadAsync。

jsdom 回归测试套件

每个功能均配套一个回归测试:该测试在 jsdom 中加载真实引擎并断言其行为(包括完整的“保存→重新打开”往返流程)。模板、精确的 NODE_PATH 配置、jsdom ^24 版本锁定,以及两个经典陷阱(setTimeout 中未 await 异步操作;|| -1 将合法的 0 错误转为 -1)详见 references/regression_harness.md,以及开箱即用的 scripts/regression_harness.js。

参考资料

  • references/ooxml_paradigm.md —— save/read 链路、buffer 类型、Content_Types 覆盖、rels 关联、带注释的条件格式与批注示例。
  • references/regression_harness.md —— jsdom 测试套件模板、环境配置、常见陷阱说明。
  • scripts/regression_harness.js —— 可直接复制粘贴的新测试骨架文件。

相关专题

更多
Office和Wps的区别
Office和Wps的区别

microsoft office提供更广泛的功能和市场领先的兼容性,但成本较高。wps针对基本办公任务提供了免费或低成本的替代方案,并具有更广泛的平台支持。想了解更多Office和Wps的相关内容,可以阅读本专题下面的文章。

2024.07.10

1881

9

office软件有哪些
office软件有哪些

office软件有:1、Microsoft Word;2、Microsoft Excel;3、Microsoft PowerPoint;4、Microsoft Outlook;5、Microsoft OneNote;6、Microsoft Access;7、Microsoft Publisher。本专题提供office软件相关的文章、下载和课程。

2023.06.29

1897

7

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

2026.11.06

0

12

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

2026.11.06

0

13

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

2026.11.06

0

10

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

0

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

0

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

0

16

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

2026.11.04

0

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 134.3万人学习