docx-preview
)在本篇文章中,我们将介绍如何使用 Vue 3 + docx-preview
来实现浏览器端的 .docx
文档预览功能。
首先需要安装以下依赖:
npm install docx-preview axios
按钮用于触发加载文档事件,文档内容将渲染在 docxContainer
容器中。
arrayBuffer.slice(0, 4)
:提取文件头前4字节,检查是否为 ZIP 格式(即 DOCX 的实际格式)。0x50 0x4B 0x03 0x04
开头(即 ASCII 的 “PK\u0003\u0004”)。renderAsync
:使用 docx-preview
将 DOCX 渲染成 HTML 插入到页面中。
样式让文档内容拥有良好的滚动体验与可读性。
如果你直接在 Windows 中创建 .docx
文件(但未写入内容),该文件虽然扩展名是 .docx
,但实际并不一定符合 OpenXML 格式,可能缺少内部结构。这就导致 docx-preview
无法识别为 ZIP 包,进而报错:
文件头不符合ZIP格式,非有效DOCX
打开该 .docx
文件 → 随便输入几个字 → 保存退出
此时 Word 会补全文件结构,再尝试加载即可正常预览。