GoForum › 🌐 V2EX
docen + office-open:不绑定框架的网页端 DOCX 可分页编辑器
demomacro ·
2026-07-05 01:38 ·
0 次点赞 · 0 条回复
@main/assets/editor-demo.png" alt="Docen Editor" />
office-open 是一个 OOXML 解析/生成库,浏览器和 Node/Bun 通用,高性能、高保真,支持 .docx, .pptx, .xlsx 与对象模型的双向转换、模板填充。
docen 在它之上提供编辑器,基于 Tiptap ( ProseMirror ),通过自定义扩展在节点和 mark 上保留 shading/border/indent/spacing/floating 等 DOCX 属性,尽可能保证编辑往返保真。在线编辑 DOCX 的方案不少( Umo Editor 、SuperDoc 、docx-editor ),再造一个 docen 主要为了:
- 双向转换 底座是 OOXML 模型,docx 既是编辑产物也是数据——可以用代码拼装段落/表格/图片、套模板、批量生成报告或合同,再把同一个模型交给编辑器修改。纯编辑器和纯生成库通常只占一头,通过 Tiptap/ProseMirror JSON 作为轻量的中间层,方便了对多份 .docx 的合成,也间接实现了对 HTML 、Markdown 的双向转换。
- 不绑框架
<docen-document>是原生 Web Component ,Vue / React / 原生 HTML 都能直接使用,另附@docen/vue这个 Vue 3 适配层,把编辑器能力暴露成v-model+ 模板 ref 。 - 贴近 MS Office 的使用习惯 外壳用 Fluent UI ,扩展模型参考了 Office.js ( ribbon 、task pane 、add-in ),写一个 docen 插件和写 Office 插件思路接近。
- 基于原生 HTML 的分页 固定页面、内容溢出自动流到下一页,用 ProseMirror 的
appendTransaction物理重排,编辑、预览、导出共享同一份文档树。在使用原生 HTML 渲染的前提下,尽可能保证预览和导出一致,少量复杂版式(如表格行跨页)会因 contenteditable 的限制产生误差。
Math / Chart / SmartArt 的渲染和编辑是接下来的重点,目前尚未支持,后续还会增加对 .pptx 和 .xlsx 的编辑器支持。
在线体验: https://docen.office-open.com/ ,欢迎反馈
0 条回复
添加回复
你还需要 登录
后发表回复