快捷導(dǎo)航

如何使用JavaScript獲取word的內(nèi)容

更新時(shí)間：2025年02月26日 16:23:24 作者：mob64ca12f63d4f

這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript獲取word的內(nèi)容,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

一、流程概述

在這個(gè)過程中，我們將通過以下步驟獲取Word文件的文字內(nèi)容。操作需要使用到FileReader對(duì)象以及庫如mammoth.js。以下是詳細(xì)的步驟流程表：

步驟	描述
1	引入必要的庫
2	創(chuàng)建文件選擇器
3	添加文件選擇事件監(jiān)聽器
4	使用FileReader讀取文件內(nèi)容
5	處理讀取的內(nèi)容并輸出

二、步驟詳解

1. 引入必要的庫

首先，確保你在HTML文件中引入mammoth.js庫。這個(gè)庫能夠幫助我們從Word文件中提取文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word文件讀取</title>
    <script src="
</head>
<body>
    <!-- 這里后面會(huì)添加其他HTML元素 -->
</body>
</html>

注釋：引入mammoth.js庫，以便后續(xù)提取Word文件內(nèi)容。

2. 創(chuàng)建文件選擇器

接下來，我們需要一個(gè)文件選擇器來讓用戶選擇他們的Word文件。

<input type="file" id="upload" accept=".docx"/>
<div id="output"></div>

注釋：<input>標(biāo)簽用于文件上傳，accept屬性限制用戶只能選擇.docx文件。

3. 添加文件選擇事件監(jiān)聽器

我們需要監(jiān)聽用戶在文件選擇器中的操作：

document.getElementById('upload').addEventListener('change', function(event) {
    var file = event.target.files[0]; // 獲取用戶選擇的文件
    if (file) {
        var reader = new FileReader(); // 創(chuàng)建文件讀取對(duì)象
        reader.onload = function(e) {
            var arrayBuffer = e.target.result; // 獲取文件內(nèi)容
            mammoth.extractRawText({ arrayBuffer: arrayBuffer })
                .then(displayResult) // 提取文本并顯示
                .catch(handleError); // 錯(cuò)誤處理
        };
        reader.readAsArrayBuffer(file); // 讀取文件為字節(jié)流
    }
});

注釋：

addEventListener：監(jiān)聽change事件，當(dāng)用戶選擇文件時(shí)觸發(fā)。

FileReader()：JavaScript提供的用于讀取文件的API。

reader.onload：讀取完成后調(diào)用的函數(shù)。

mammoth.extractRawText：提取Word文件文本的方法。

4. 處理讀取的內(nèi)容并輸出

定義displayResult和handleError函數(shù)，通過它們來顯示結(jié)果和處理錯(cuò)誤。

function displayResult(result) {
    document.getElementById('output').innerText = result.value; // 顯示提取的文本
}

function handleError(err) {
    console.error('Error: ', err); // 輸出錯(cuò)誤信息
}

注釋：

displayResult：該函數(shù)將提取的文本顯示在output的<div>元素中。

handleError：用于輸出讀取過程中可能發(fā)生的錯(cuò)誤到控制臺(tái)。

類圖

使用Mermaid語法可以繪制如下一張類圖，展示代碼組件之間的關(guān)系。

旅行圖

通過Mermaid語法的旅行圖，可以清晰了解我們實(shí)現(xiàn)上述功能的過程。

三、小結(jié)

通過以上步驟，我們成功地運(yùn)用JavaScript從Word文件中提取了文字內(nèi)容。這種技巧在需要處理用戶上傳文檔內(nèi)容的場(chǎng)景中非常有用，例如在線文檔編輯、內(nèi)容管理系統(tǒng)等。學(xué)習(xí)并掌握這一技能，將極大提高你的前端開發(fā)能力。

四、方法補(bǔ)充

除了上文的方法，小編為大家整理了其他JavaScript獲取word內(nèi)容的方法，希望對(duì)大家有所幫助

示例代碼

把docx文件中表格轉(zhuǎn)化為json二維數(shù)組

import { convertToHtml } from "mammoth"
import { JSDOM } from "jsdom"

convertToHtml({ path: "./test.docx" })
    .then(function (result) {
        const html = result.value // The generated HTML
        const messages = result.messages // 轉(zhuǎn)化時(shí)的一些warning信息
        console.log(messages)

        const table_data: string[][] = []

        // 使用 JSDOM 加載 HTML 內(nèi)容
        const dom = new JSDOM(html)
        const document = dom.window.document

        // 獲取表格中的所有 <tr> 元素
        const tableRows = document.querySelectorAll("table tr")

        // 遍歷 <tr> 元素
        tableRows.forEach((row, index) => {
            const row_data: string[] = []
            // 獲取當(dāng)前行中的所有 <td> 元素
            const cells = row.querySelectorAll("td")

            // 遍歷 <td> 元素
            cells.forEach((cell, cellIndex) => {
                row_data.push(cell.textContent ?? "")
            })
            table_data.push(row_data)
        })

        console.log("Table結(jié)果", table_data)
    })
    .catch(function (error) {
        console.error(error)
    })

代碼解釋