一、问题的起点

幕布的核心操作界面是一个可无限缩进的大纲编辑器。当用户点击"导出"并选择Word、PDF、图片或HTML时，幕布需要在几百毫秒内完成一项工作：把一个树形大纲节点结构转换成目标格式的视觉输出。

这个过程中涉及的技术链路，本文从节点树遍历、中间格式生成、到渲染引擎分发逐一分析。

二、节点树的内部表示

幕布文档在内存中是一棵多叉树。每个节点至少包含：文本内容、层级深度、折叠状态、备注数据、样式标记（加粗/斜体/颜色）。

导出时，系统首先对这棵树做一次深度优先遍历，按用户当前看到的展开/折叠状态生成一个线性节点序列。折叠的子树在导出时不会被遍历——这对应了"所见即所得"的导出逻辑。

三、导出链路的分叉：四种目标格式

渲染器拿到线性化节点序列后，根据目标格式进入不同的渲染分支：

Word（.docx）分支：

由于Word本质是XML打包格式（Office Open XML），幕布需要将节点序列映射为Word的段落+缩进层级。核心映射关系：

• 节点文本 → Word段落元素（<w:p>）
• 缩进层级 → 段落属性中的左缩进值（<w:ind>的left属性，每级约360twips）
• 加粗/斜体 → 字符级格式标记（<w:rPr>内的<w:b/>和<w:i/>）

PDF分支：

通常走HTML→PDF的中间转换路径。幕布先生成一份排版好的HTML文档，再通过渲染引擎（如Chromium Headless或直接使用系统打印接口）输出为PDF。这个方案的优点是字体渲染和CSS布局可控，缺点是复杂排版（如超宽表格）可能出现换页问题。

图片（PNG）分支：

和PDF类似，先渲染HTML，再通过Canvas截图。需要注意：图片导出要求固定宽度（通常1200px或1920px），不同视口宽度下长文档的截断位置需要精确控制。

HTML分支：

最直接的导出路径——节点树直接渲染为嵌套的<ul><li>结构，样式通过内联CSS或<style>块控制。这是所有导出格式中保真度最高的，因为不经过任何中间转换。

四、导出任务的生命周期

1. **序列化阶段：**遍历文档树，生成节点线性表（通常<50ms）
2. **中间格式生成：**根据目标格式构建对应的中间数据结构（Word的XML DOM、HTML的DOM树等）
3. **渲染输出：**中间格式转为最终二进制流（.docx打包、PDF渲染、PNG截取）
4. **文件写入：**触发浏览器下载或写入本地文件系统

对于大型文档（超过500个节点），序列化和渲染阶段可能超过2秒。幕布的做法是在导出前显示进度提示，并分块渲染以防止主线程阻塞。

五、格式保真度对比

下载地址：幕布最新下载

**免责声明：**本文基于公开的文档格式标准和幕布产品行为进行技术分析，不涉及反向工程或逆向操作。