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

概述

本方案支持 Word 文档（.docx）的导入和导出，实现了编辑器与 Office 文档格式之间的无缝转换。整体架构如下：

Word .docx 文件 ↓ (导入) mammoth 库解析 ↓ HTML 格式 ↓ Tiptap 编辑器 ↓ JSON Content ↓ (导出) docx 库生成 ↓ Word .docx 文件 

核心依赖库

库名	版本	用途
mammoth	1.11.0	Word 文档导入，将 .docx 转换为 HTML
docx	9.1.0	Word 文档导出，将 JSON 转换为 .docx
markdown-it	14.1.0	Markdown 文档导入

Word 文档导入

文件位置

• API 路由: src/app/api/import/route.ts
• 核心逻辑: src/lib/server/importDocument.ts

1. 导入流程

.docx.md.txt 用户选择文件 FormData 上传文件 验证文件类型? mammoth 解析 markdown-it 解析 纯文本解析 生成 HTML 样式清理 返回给前端 Tiptap 渲染

2. API 接口

端点: POST /api/import

请求格式: multipart/form-data

{
  file: File // 上传的文件对象
}

响应格式:

{
  success: true,
  html: string, // 转换后的 HTML
  format: 'docx' | 'markdown' | 'text', // 原始格式
  warnings?: string[], // 警告信息（如有）
  filename: string 
}