如何使用JavaScript在客户端读取.docx文件并实现内容编辑

方案选型说明 #

以下方案均为纯前端可实现的依赖方案，不需要后端服务支持，可完全在客户端侧完成文件读取、编辑、导出全流程，适配Vue2/Vue3项目。

一、读取DOCX内容实现 #

• 依赖选择：使用mammoth.js，纯JS实现的docx解析库，可将docx内容转换为HTML、纯文本或者原始内部结构，适配所有主流浏览器。
• 基础使用步骤（Vue3示例）：

1. 安装依赖：npm install mammoth
2. 组件内引入：import mammoth from 'mammoth'
3. 上传文件解析代码示例：

// 绑定input type="file"的change事件
const handleFileUpload = async (e) => {
  const file = e.target.files[0]
  if (!file || file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
    alert('请上传docx格式文件')
    return
  }
  const arrayBuffer = await file.arrayBuffer()
  // 转换为HTML格式，可直接传入富文本编辑器
  const result = await mammoth.convertToHtml({arrayBuffer: arrayBuffer})
  const htmlContent = result.value 
  const parseWarnings = result.messages // 解析过程中的格式兼容警告
}

• 若仅需要提取纯文本内容，将转换方法替换为mammoth.extractRawText即可。

二、DOCX内容编辑实现 #

可根据编辑需求选择两种实现路径：

场景1：轻量结构化编辑，最终导出为docx #

• 依赖选择：搭配docx.js库，支持自定义修改段落、样式、表格、图片等元素，编辑完成后可直接生成新的docx文件导出。
• 基础导出示例：

import { Document, Packer, Paragraph, TextRun } from 'docx'

// 编辑完成后生成新docx并导出
const exportEditedDocx = async (editedContent) => {
  const doc = new Document({
    sections: [{
      properties: {},
      children: [
        new Paragraph({
          children: [new TextRun(editedContent)]
        })
      ]
    }]
  })
  const blob = await Packer.toBlob(doc)
  // 触发浏览器下载
  const url = URL.createObjectURL(blob)
  const downloadLink = document.createElement('a')
  downloadLink.href = url
  downloadLink.download = 'edited.docx'
  downloadLink.click()
  URL.revokeObjectURL(url)
}

场景2：类Word可视化编辑 #

如果需要接近桌面端Word的所见即所得编辑体验，可直接引入Web富文本编辑器，将mammoth.js解析得到的HTML内容传入编辑器进行可视化编辑，编辑完成后再用上述docx.js方案导出为docx即可，Vue生态下成熟的富文本编辑器选项：

• 轻量需求可选：Quill、TinyMCE
• 复杂排版需求可选：WangEditor、CKEditor
  上述编辑器均有官方封装的Vue适配组件，可直接引入项目使用。

兼容说明 #

mammoth.js对docx的复杂格式支持有限，宏、内嵌OLE对象、特殊自定义样式等内容可能无法完全解析，仅适配普通文本、段落、列表、基础表格、图片等常规内容的解析。如果需要完美兼容所有Word格式，可使用WebAssembly版本的LibreOffice封装方案，完全在客户端侧完成全格式解析编辑，无需后端支持。

内容的提问来源于stack exchange，提问作者Mostafa Kazemi