纯前端实现 Word 文档读取与导出方案详解

文件限制:

• 最大文件大小：10MB
• 支持格式：.docx, .md, .markdown, .txt

3. Word 文档解析 (mammoth)

核心函数：docxToHtml

async function docxToHtml(buffer: ArrayBuffer): Promise<ImportedDocumentResult> {
  const nodeBuffer = Buffer.from(buffer);
  const { value, messages } = await mammoth.convertToHtml({
    buffer: nodeBuffer,
    {
      // 样式映射：将 Word 样式映射到 HTML 标签
      styleMap: [
        'p[style-name="Heading 1"] => h1:fresh',
        'p[style-name="Heading 2"] => h2:fresh',
        'p[style-name="Heading 3"] => h3:fresh',
        'p[style-name="Heading 4"] => h4:fresh',
      ],
      // 图片处理：转换为 base64 内联图片
      convertImage: mammoth.images.inline(async (image) => {
        const base64 = await image.read('base64');
        return {
          src: `data:${image.contentType};base64,${base64}`,
        };
      }),
    }
  });
  // 清理样式（移除 text-indent 等）
  const sanitized = removeInlineTextIndentStyles(value.trim()) || '<p></p>';
  // 提取警告信息
  const warnings = messages?.filter((message) => message.type === 'warning').map((message) => message.message);
  return {
    format: 'docx',
    html: sanitized,
    warnings: warnings && warnings.length > 0 ? warnings : undefined,
  };
}

样式映射策略

mammoth 通过 styleMap 配置将 Word 内置样式映射到 HTML 标签：

fresh 修饰符: 确保每个样式都生成独立的新标签，避免合并到父元素。

图片处理

convertImage: mammoth.images.inline(async (image) => {
  const base64 = await image.read('base64');
  return {
    src: `data:${image.contentType};base64,${base64}`,
  };
})

工作原理:

1. mammoth 检测到 Word 文档中的图片
2. 读取图片二进制数据并转换为 base64 编码
3. 生成 data URL: data:image/png;base64,iVBORw0KGgo...
4. 在 HTML 中内联显示，无需外部图片文件

优点:

• ✅ 所有资源自包含，无需额外请求
• ✅ 编辑器可直接渲染
• ✅ 支持离线编辑

缺点:

• ❌ 大图片会增加文档体积
• ❌ base64 编码比原始二进制大约 33%

4. 样式清理

removeInlineTextIndentStyles 函数

function removeInlineTextIndentStyles(html: string): string {
  return html.replace(/(style=)(['"])([^'"]*)(\2)/gi, (_match, prefix: string, quote: string, styles: string) => {
    const filtered = styles
      .split(';')
      .map((item) => item.trim())
      .filter((item) => item.length > 0 && !/^text-indent\s*:/i.test(item));
    if (filtered.length === 0) {
      return '';
    }
    return `${prefix}${quote}${filtered.join('; ')}${quote}`;
  });
}

目的: 移除 Word 文档中的 text-indent 样式，避免与编辑器的首行缩进规则冲突。

示例:

<!-- 清理前 -->
<p style="text-indent: 2em;font-size: 14px;">段落内容</p>
<!-- 清理后 -->
<p style="font-size: 14px;">段落内容</p>

5. 纯文本和 Markdown 导入

纯文本导入

function textToHtml(buffer: ArrayBuffer): ImportedDocumentResult {
  const text = normalizeTextContent(buffer).trim();
  // 检测段落分隔符（双换行）
  const hasDoubleBreak = /\n{2,}/.test(text);
  const rawBlocks = hasDoubleBreak ? text.split(/\n{2,}/) : text.split(/\n/);
  const paragraphs = rawBlocks
    .map((block) => block.replace(/\n+/g, '\n').trim())
    .filter(Boolean)
    .map((paragraph) => {
      if (!hasDoubleBreak) {
        return `<p>${escapeHtml(paragraph)}</p>`;
      }
      // 段落内的单换行转换为 <br>
      const lines = paragraph.split('\n').map((line) => escapeHtml(line));
      return `<p>${lines.join('<br>')}</p>`;
    });
  return {
    format: 'text',
    html: paragraphs.join('\n'),
  };
}