Vue.js - 使用docx-preview实现Word文档在线预览功能（docx文件解析与展示）

作者：hangge | 2025-12-16 08:39

Web 应用中，在线预览 Word（.docx）文档是一个非常常见的需求。传统方案通常依赖后端转换（如 LibreOffice、Aspose、Office 自动化等），将 Word 转成 PDF 或 HTML 再返回给前端。这类方案虽然效果稳定，但也带来了部署复杂、资源消耗大、并发受限等问题。

随着前端能力的增强，纯前端解析并渲染 docx 文件逐渐成为一种可行方案。docx-preview 正是其中一个成熟、轻量且易于集成的库，它可以在浏览器中直接将 .docx 文件解析为 HTML 并进行展示，非常适合在 Vue 项目中快速实现 Word 在线预览功能。

1，基本介绍

（1）docx-preview （也叫 docxjs）是一个基于 JavaScript 的前端库，专门用于在浏览器中解析并渲染 .docx 文件。它无需依赖后端服务，仅通过前端即可将 Word 文档转换为可展示的 HTML 结构。

GitHub 主页地址：https://github.com/VolodymyrBaydalka/docxjs

（2）.docx 本质上是一个 ZIP 压缩包，内部包含大量 XML 文件，用于描述文档结构、样式和资源。docx-preview 的核心流程大致如下：

解析 docx（ZIP）文件
读取并解析文档相关的 XML（如 document.xml、样式定义等）
将 Word 文档结构转换为对应的 HTML 节点
将生成的 HTML 插入到指定的 DOM 容器中进行展示

2，安装说明

进入项目根目录，执行如下命令安装 docx-preview 库即可：

npm install docx-preview

3，选择本地 Word 并再页面展示样例

（1）下面样例可以通过点击按钮，选择一个本地 Word 文件并渲染到页面上展示：

<template>
    <div id="docx-demo">
        <div class="flex">
            <!-- 本地上传 -->
            <el-upload :limit="1" :file-list="fileList" accept=".docx" 
                 :beforeUpload="beforeUpload" action="">
                <el-button>选择本地文件</el-button>
            </el-upload>
        </div>
        <div ref="docxPreview"></div>
    </div>
</template>

<script>
import { renderAsync } from 'docx-preview';

export default {
    components: {
    },
    data() {
        return {
            src: '',
            fileList: []
        }
    },
    methods: {
        //在beforeUpload中读取文件内容
        beforeUpload(file) {
            let reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = (loadEvent) => {
                let docData = loadEvent.target.result;
                // 获取到docx文件的blob或ArrayBuffer后
                renderAsync(docData, this.$refs.docxPreview)
                    .then(() => console.log('文档渲染完成！'));
            };
            return false
        }
    }
}
</script>

（2）运行效果如下：

4，从网络 URL 加载示例

（1）有时候 docx 文档在远端（例如后端返回 URL），或者后端接口直接返回二进制流，则可以获取获取文件的 ArrayBuffer 数据再传给 renderAsync 渲染显示。

<template>
    <div id="docx-demo">
        <div class="flex">
            <!-- 二进制文件预览 -->
            <el-button @click="fetchData">使用二进制文件预览</el-button>
        </div>
        <div ref="docxPreview"></div>
    </div>
</template>

<script>
import { renderAsync } from 'docx-preview';

export default {
    components: {
    },
    data() {
        return {
            src: '',
            fileList: []
        }
    },
    methods: {
        //使用二进制文件预览
        //如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，
        //则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。
        fetchData() {
            fetch('http://localhost:8080/data/sample.docx')
                .then(response => response.arrayBuffer())
                .then(arrayBuffer => {
                    renderAsync(arrayBuffer, this.$refs.docxPreview)
                        .then(() => console.log('文档渲染完成！'));
                })
        }
    }
}
</script>