前端实现word文档预览和内容提取的详细过程

更新时间：2024年05月25日 11:52:37 作者：crazyXB

在前端直接读取并原样展示Word文档是一个相对复杂的任务,因为Word文档的格式(如.doc或.docx)与Web技术栈使用的格式(HTML、CSS)不兼容,下面这篇文章主要给大家介绍了关于前端实现word文档预览和内容提取的详细过程,需要的朋友可以参考下

需求

上一篇写了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, // could be any type that supported by JSZip.loadAsync

2.bodyContainer: 渲染的区域

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文档预览和内容提取的文章就介绍到这了,更多相关前端word文档预览和内容提取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS动态高度虚拟列表实现原理解析
这篇文章将和大家一起探讨一下动态高度虚拟列表原理并指出常见虚拟列表采用累计高度方式存在缺点,感兴趣的小伙伴可以跟随小编一起学习一下
2024-11-11
IE6-IE9中tbody的innerHTML不能赋值的解决方法
这篇文章主要介绍了IE6-IE9中tbody的innerHTML不能赋值的解决方法，很实用，需要的朋友可以参考下
2014-09-09
JavaScript定时器实现的原理分析
JavaScript中的定时器大家基本在平时的开发中都遇见过吧，但是又有多少人去深入的理解其中的原理呢？本文我们就来分析一下定时器的实现原理、定时器的妙用、定时器使用注意事项，有兴趣的朋友可以看下
2016-12-12
百度搜索框智能提示案例jsonp
这篇文章主要介绍了百度搜索框智能提示案例jsonp的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
JS实现按钮颜色切换效果
这篇文章主要为大家详细介绍了JS实现按钮颜色切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
JavaScript 乱码问题
在用js写网页时，如果html等内容全部用document.write输出，包括<html>、<meta等标签，当嵌套时，会出现输出内容为乱码的问题
2009-08-08
浅谈pc端rem字体设置的问题
下面小编就为大家带来一篇浅谈pc端rem字体设置的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
js实现拾色器插件（ColorPicker）
这篇文章主要为大家详细介绍了js实现拾色器插件ColorPicker，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
用瀑布流的方式在网页上插入图片的简单实现方法
下面小编就为大家带来一篇用瀑布流的方式在网页上插入图片的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
Javascript中函数名.length属性用法分析(对比arguments.length)
这篇文章主要介绍了Javascript中函数名.length属性用法,结合实例形式简单对比分析了与arguments.length属性的用法区别,需要的朋友可以参考下
2016-09-09