@zhenghy/doc-preview

doc-preview

纯前端的 Vue 3 组件，在浏览器里直接解析并渲染 Word .doc（Word 97-2003 / OLE2）文件。

文件不上传、不需要后端、不需要 API Key。 解析器按微软公开规范（MS-DOC / MS-CFB）自行实现，不依赖 mammoth.js 等第三方库。

• 在线体验：https://zhenghy-gh.github.io/doc-preview/
• 功能清单：FEATURES.md ｜ English

安装

npm install @zhenghy/doc-preview

同时提供非 scoped 别名 doc-preview，两者内容一致。

使用

Vue 3 组件

<template>
  <input type="file" accept=".doc" @change="onChange" />
  <DocPreview :source="file" />
</template>

<script setup>
import { ref } from 'vue'
import { DocPreview } from '@zhenghy/doc-preview'
import '@zhenghy/doc-preview/style.css'

const file = ref(null)
const onChange = (e) => (file.value = e.target.files?.[0] ?? null)
</script>

CDN

<link rel="stylesheet" href="https://unpkg.com/@zhenghy/doc-preview/dist-lib/style.css" />

<script type="module">
  import { DocPreview } from 'https://unpkg.com/@zhenghy/doc-preview/dist-lib/doc-preview.js'
</script>

同时提供 UMD 版本 dist-lib/doc-preview.umd.cjs（全局变量 window.DocPreview）。

只解析、不渲染

import { parseDocFileWithFormat } from '@zhenghy/doc-preview'

const result = await parseDocFileWithFormat(file)
if (result.success) {
  console.log(result.document?.paragraphs)
} else {
  console.error(result.error)
}

API

Props

事件

实例方法

通过模板 ref 调用。

导出函数

组件在文件 ≥ 1 MB 时会自动走 Worker，无需手动调用 parseWithWorker。

键盘快捷键

支持情况

支持

• Word 97-2003 .doc、Word 6.0 / 95，以及 .dot 模板
• 文本：UTF-16LE 与 8-bit 压缩编码，自动识别（含 macOS textutil 生成的文件）
• 字符格式：字体、字号、加粗、斜体、下划线、删除线、上下标、颜色、高亮、边框 / 底纹、字符间距
• 段落格式：对齐、缩进、行距、段前段后间距、大纲级别、底纹、边框、制表位
• 样式、列表（多级 / 编号续接）、表格（边框 / 合并 / 嵌套 / 对齐）
• 分节、分页、页眉页脚（首页 / 奇偶页）
• 图片、形状、文本框、公式（→ LaTeX）、图表、艺术字
• 超链接、书签、页码域、交叉引用、索引、目录
• 修订痕迹（标记 / 接受 / 拒绝）
• 界面：搜索、缩放、打印、导出 Markdown、大纲导航、暗色模式、中英文切换

不支持

• DOCX（Open XML）— 本包只处理 .doc
• VBA 宏、ActiveX 控件、加密文档
• 部分高级图形效果（3D / 渐变 / 艺术效果）会简化渲染

浏览器

Chrome 80+ / Edge 80+ / Firefox 75+ / Safari 14+，均支持 Web Worker。老浏览器自动降级到主线程解析（功能完整，大文件可能卡顿）。

本地开发

npm install
npm run dev            # 开发服务器 http://localhost:5173
npm test               # 单元测试（59 个文件 / 1332 个用例）
npm run lint           # 代码检查
npm run build:lib      # 构建库产物 → dist-lib
npm run build          # 构建演示站点 → dist
npm run release        # 发布到 npm（同时发布 scoped 与非 scoped 两个包名）

许可证

MIT © zhenghy