豆包生成的文档下载时格式错乱或丢失，如何保持原始排版？

Question

豆包（Doubao）生成的文档在下载时出现格式错乱或丢失（如标题层级塌陷、代码块变形、列表缩进消失、中英文混排断行异常），根本原因在于其Web端输出依赖动态渲染（React/Vue组件+CSS-in-JS），而默认“另存为PDF”或浏览器打印功能仅捕获可见DOM快照，无法还原富文本语义结构与响应式样式。此外，导出逻辑未内嵌CSS媒体查询适配、字体回退机制缺失，且不支持Markdown源码直导（如转为含样式的DOCX/PDF）。常见表现包括：一级标题变正文、表格列宽归零、高亮代码丢失背景色、中文标点挤压换行。该问题非用户操作失误，而是平台导出链路缺乏WYSIWYG保真设计——未集成Puppeteer服务端渲染、未提供LaTeX/HTML模板导出选项，也未对CSS进行print媒体查询优化与内联化处理。本质是AI内容生产与专业文档交付之间存在“渲染—导出”断层。

Answer 1

```html

一、表层现象：浏览器原生导出的“所见非所得”

• 用户点击「另存为PDF」后，一级标题（<h1>）渲染为普通段落，语义层级完全丢失；
• Markdown生成的代码块（如```python）在PDF中背景色消失、行号错位、缩进塌陷为单空格；
• 中英文混排时，中文标点（如“，”“。”）被强制挤入行尾导致断行异常，CSS line-break: strict 未生效；
• 响应式表格列宽归零，table-layout: auto 在打印媒体下失效，内容重叠不可读。

二、技术根因：动态渲染与静态导出的结构性失配

豆包前端采用 React 18 + CSS-in-JS（如 Emotion）构建富文本编辑器，DOM 节点高度依赖运行时 hydration 与样式注入。而浏览器原生打印/PDF 导出仅捕获当前可见 DOM 快照，存在三大断裂：

1. 语义剥离：React 组件抽象的 Heading、CodeBlock 等逻辑组件，在导出时退化为无 class 的裸 <div>；
2. 样式脱钩：CSS-in-JS 生成的动态类名（如 css-1a2b3c）未内联，且未启用 @media print 专用规则；
3. 字体失能：未声明 @font-face 回退链（如 "Noto Sans SC", "PingFang SC", sans-serif），导致中文标点渲染为方框或挤压。

三、架构断层：AI生成流与文档交付流的解耦

graph LR
A[LLM 输出 Markdown AST] --> B[React 渲染器 hydrate]
B --> C[客户端 DOM 树]
C --> D[浏览器 print API]
D --> E[无样式/无语义 PDF]
A --> F[缺失：服务端 SSR 渲染管道]
F --> G[Puppeteer + HTML 模板]
G --> H[内联 CSS + print 媒体查询 + 字体嵌入]

四、工程级解决方案矩阵

方案层级	关键技术选型	保真度提升点	落地复杂度
客户端增强	CSS print 媒体查询 + all: unset 重置 + content: attr(data-title) 语义还原	修复标题层级、列表缩进，但无法恢复代码高亮背景	★☆☆☆☆
服务端渲染	Puppeteer v22+ with page.pdf({ format: 'A4', printBackground: true })	完整保留 CSS-in-JS 注入样式、字体、代码块背景、表格布局	★★★☆☆
格式直出	Remark + Rehype + DocxGenJS / Pandoc + LaTeX 模板	绕过 HTML 渲染，从 Markdown AST 直出带样式的 DOCX/PDF，支持中文字体嵌入与断行控制	★★★★☆

五、生产就绪建议：WYSIWYG 保真四原则

1. 语义锚定：所有富文本组件必须输出标准 HTML5 语义标签（<h1>~<h6>、<pre><code class="language-py">），禁用纯 <div role="heading">；
2. 样式固化：导出前执行 document.styleSheets 遍历，将关键 CSS 规则内联至 <style media="print">，并移除 max-width、flex-wrap 等响应式干扰属性；
3. 字体自治：在导出 HTML 模板中预加载 WOFF2 中文字体（如 Noto Sans SC），通过 @font-face { src: url(...) format('woff2'); font-display: swap; } 保障跨平台一致性；
4. 格式可编程：暴露 /api/export?format=docx&template=tech-report 接口，支持模板变量注入（作者、日期、公司LOGO Base64）与 Markdown 扩展语法（如 [TOC] 自动解析）。

```