前端实现Word文档预览与内容提取方案

作者：桌面漫游时间：2026-11-01 02:34:41浏览：544

本文介绍如何在浏览器端实现Word文档的在线预览与内容提取。通过集成docx-preview库完成文档渲染展示，利用mammoth库将文档转换为纯文本、HTML或Markdown格式。文章详细解析了核心API参数及完整代码示例，提供了一套轻量级的前端解决方案。

需求

在上一篇解析Excel文档的基础上，进一步探讨Word文档的处理方式。

解决问题

1. 在浏览器环境中实现Word文档的在线预览功能。

2. 支持直接提取Word文档内的文本内容。

利用技术

文档预览功能采用docx-preview库。

    <script src="https://cdn.jsdelivr.net/npm/docx-preview@0.1.15/dist/docx-preview.js"></script>

内容提取功能采用mammoth库。

    <script src="https://cdn.bootcdn.net/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>

预览文档实现过程

// HTML
<div id="preview"></div>

实现预览功能

renderAsync方法接收四个参数

1. document：数据类型可为Blob、ArrayBuffer或Uint8Array，即任何JSZip.loadAsync支持的数据类型。

2. bodyContainer：指定用于渲染文档的DOM容器区域。

3. styleContainer：通常指定一个HTML元素，用于包含和管理渲染文档所需的样式信息，涵盖字体、颜色及布局等。

4. options：对象类型，具体配置参数需参考官方文档。

// JavaScript
const onWord = (event) => {
    let reader = new FileReader();
    let file = event.target.files[0];
    let options = { inWrapper: false, ignoreWidth: true, ignoreHeight: true }
    docx.renderAsync(file, document.getElementById("preview"), null, options)
}

提取word文档实现过程

1. extractRawText：用于将文档转换为纯文本。

2. convertToHtml：用于将文档转换为HTML格式。

3. convertToMarkdown：用于将文档转换为Markdown格式。

const onWord = (event) => {
    let reader = new FileReader();
    let file = event.target.files[0];
    if (file) {
        reader.onload = function (e) {
            const data = e.target.result;
            // 转文字
            mammoth.extractRawText({ arrayBuffer: data }).then(function (displayResult) {
                wordData.value = displayResult.value
            }).done();
            // 转HTML
            mammoth.convertToHtml({ arrayBuffer: data }).then(function (displayResult) {
                console.log(displayResult);
            }).done();
            // 转Markdown 文档。
            mammoth.convertToMarkdown({ arrayBuffer: data }).then(function (displayResult) {
                console.log(displayResult);
            }).done();
        };
        reader.readAsArrayBuffer(file);
    }
}

word预览

效果预览

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <title>上传word文件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 0 50px;
        }

        .operation {
            padding: 20px;
        }

        .btn {
            min-width: 50px;
            font-size: 20px;
            color: #fff;
            background: #118ee9;
            margin: 0 20px 0 0;
            padding: 8px;
            border: none;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .item {
            width: 350px;
            box-sizing: border-box;
            padding: 4px 14px 4px 14px;
            color: #000;
            font-size: 12px;
            background: #fff;
        }

    </style>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/docx-preview@0.1.15/dist/docx-preview.js"></script>

</head>

<body>
    <div class="container" id="app">
        <div class="operation">
            <button class="btn" @click="uploadFile">上传word文件</button>
        </div>
        <br>
        <div v-if="wordData">{{wordData}}</div>
        <br>
        <div id="preview"></div>
    </div>
    <script>
        const { createApp, ref, onMounted } = Vue
        createApp({
            setup() {
                let wordData = ref('')
                const uploadFile = (mark) => {
                    let inputEle = document.createElement('input')
                    inputEle.type = 'file'
                    inputEle.accept = '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                    inputEle.click()
                    inputEle.addEventListener('input', (event) => {
                        onWord(event)
                    })
                };
                const onWord = (event) => {
                    let reader = new FileReader();
                    let file = event.target.files[0];
                    let options = { inWrapper: false, ignoreWidth: true, ignoreHeight: true }
                    docx.renderAsync(file, document.getElementById("preview"),null, options)
                    let fileName = file.name
                    if (file) {
                        reader.onload = function (e) {
                            const data = e.target.result;
                            // 转文字
                            mammoth.extractRawText({ arrayBuffer: data }).then(function (displayResult) {
                                wordData.value = displayResult.value
                            }).done();
                            // 转HTML
                            mammoth.convertToHtml({ arrayBuffer: data }).then(function (displayResult) {
                                console.log(displayResult);
                            }).done();
                            // 转Markdown 文档。
                            mammoth.convertToMarkdown({ arrayBuffer: data }).then(function (displayResult) {
                                console.log(displayResult);
                            }).done();
                        };
                        reader.readAsArrayBuffer(file);
                    }
                }

                return {
                    wordData,
                    uploadFile,
                    onWord,
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

总结

本文介绍了前端实现Word文档预览和内容提取的方法，更多相关内容可参考本站历史文章或继续浏览后续文章，感谢支持。

作者最新文章

Mock.js 拦截失效或数据格式错误的常见原因及排查

2026-11-05 10:11:59

Java和JavaScript名字像但没关系：辨析Java、JavaWeb与JS

2026-11-04 09:30:54

CodePen、JSFiddle与RunJS对比：哪款JS在线运行工具更适合你？

2026-11-03 16:46:57

JS 统计图渲染空白或报错怎么排查？常见问题解决指南

2026-11-03 09:49:40

flv.js 常见报错 MediaError 与解码失败排查指南

2026-11-02 10:29:29