Vue3 实现 DOCX 文档在线预览功能(基于 docx-preview)


Vue3 实现 DOCX 文档在线预览功能(基于 docx-preview

在本篇文章中,我们将介绍如何使用 Vue 3 + docx-preview 来实现浏览器端的 .docx 文档预览功能。


项目依赖

首先需要安装以下依赖:

npm install docx-preview axios

组件代码详解

Template 部分


按钮用于触发加载文档事件,文档内容将渲染在 docxContainer 容器中。


Script 部分


关键点说明:
  • arrayBuffer.slice(0, 4):提取文件头前4字节,检查是否为 ZIP 格式(即 DOCX 的实际格式)。
  • ZIP 文件头:以 0x50 0x4B 0x03 0x04 开头(即 ASCII 的 “PK\u0003\u0004”)。
  • renderAsync:使用 docx-preview 将 DOCX 渲染成 HTML 插入到页面中。

Style 样式部分


样式让文档内容拥有良好的滚动体验与可读性。


关于 DOCX 文件无法预览的情况

如果你直接在 Windows 中创建 .docx 文件(但未写入内容),该文件虽然扩展名是 .docx,但实际并不一定符合 OpenXML 格式,可能缺少内部结构。这就导致 docx-preview 无法识别为 ZIP 包,进而报错:

文件头不符合ZIP格式,非有效DOCX

✅ 解决办法:

打开该 .docx 文件 → 随便输入几个字 → 保存退出
此时 Word 会补全文件结构,再尝试加载即可正常预览。


你可能感兴趣的:(Vue3 实现 DOCX 文档在线预览功能(基于 docx-preview))