离线 Office 编辑器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_538e39fa/offline-office-editor 到 AI 助手。
技能介绍
问题是什么
把 .xlsx / .docx / .pptx 的生成与编辑塞进没有服务器、没有 CDN、没有网络的环境里,难度不在 UI,而在文件往返:你在浏览器里做的修改,必须能被 Excel、Word、PPT 原样读回去,而不是打开后条件格式没了、批注丢了、公式变成了常量。
很多方案直接交给 SheetJS,但它读写 zip/XML 时会静默丢弃不少特性:条件格式、批注、数据验证、图表、冻结窗格、超链接、部分样式。这个技能要解决的就是这些"能写不能读"或"读回来缺一块"的问题。
它怎么工作
核心是单页 + 零后端编辑器:
- 统一入口:Excel 网格、Word 页面、PPT 舞台共享
index.html,各自有excel.js、word.js、ppt.js。 - 单文件交付:构建脚本把所有库内联进
office-standalone.html(约 5.7 MB),双击即用。 - 单一数据源:内存中只有纯 JS 结构,不是 OOXML。Excel 数据是
ROWS × COLS二维数组,样式、批注等按r + ',' + c键控;条件格式、数据验证、合并单元格按{r1,c1,r2,c2}键控。文件格式只是序列化结果。 - OOXML 后处理层:保存时 SheetJS 产出 baseline,
injectXxx函数重写worksheet、rels、[Content_Types].xml补回丢失特性;打开时readXxx反向解析恢复。
添加新特性流程:
- 建模:先定内存结构,如 CF 规则为
{r1,c1,r2,c2,type,...}。 - 渲染:在
renderCell/renderAll绘制,.cell-input用position:relative; z-index:1,浮层用低 z-index 和pointer-events:none。 - 导出:写
injectXxx重写 OOXML 部件,按CT_Worksheet子节点顺序接线。 - 导入:写
readXxx解析同一部件,接入openWorkbook,必须try/catch。 - 暴露钩子:挂到
window.__excelDeep。 - 回归测试:写
_excel__test.js,jsdom 加载真实引擎做 save → reopen 断言。 - 构建 + 冒烟:
node build-standalone.js,跑_standalone_smoke.js。
适用边界
- 不是完整克隆:解决离线编辑与文件往返,不是桌面级排版或计算能力。
- SheetJS 是 baseline:特性必须经 OOXML 后处理层才能往返存活。
- 字符串必须成对转义:公式或文本含
,、&、"时,escapeXml/unescapeXml必须双向映射。 - Buffer 类型有坑:
injectXxx返回arraybuffer而非Blob,只有最后buildAndSaveBuffer才包装。 - 测试陷阱:jsdom 锁
^24;setTimeout异步要await;|| -1会把合法0变成-1。 - 回归强制:每个特性都要 jsdom 测试覆盖完整往返。
使用场景
- 在无外网的内网机器上生成 .xlsx,要求条件格式、批注和冻结窗格保存后仍存在。
- 修改 SheetJS 导出的表格后,发现 Excel 打开时数据验证和图表丢失,需要补齐 OOXML 部件。
- 给离线编辑器新增 Excel 公式或合并单元格功能,并写 jsdom 往返回归测试。
- 调试 office-standalone.html 双击运行问题,确认内联后零后端仍可加载。
适合人员
- 维护离线 Office 编辑器的前端工程师:需要在无 CDN 环境补齐 SheetJS 丢弃的 Excel 特性。
- 处理内网报表的开发者:要把生成 .xlsx 的条件格式、批注和数据验证写回正确 OOXML。
- 写编辑器回归测试的工程师:需要用 jsdom 驱动真实引擎验证 save/reopen 往返。
- 负责打包单文件应用的开发者:需要构建 office-standalone.html 并排查加载错误。