如何使用JavaScript獲取word的內容

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

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

一、流程概述

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

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

二、步驟詳解

1. 引入必要的庫

首先，確保你在HTML文件中引入mammoth.js庫。這個庫能夠幫助我們從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>
    <!-- 這里后面會添加其他HTML元素 -->
</body>
</html>

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

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

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

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

注釋：<input>標簽用于文件上傳，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)建文件讀取對象
        reader.onload = function(e) {
            var arrayBuffer = e.target.result; // 獲取文件內容
            mammoth.extractRawText({ arrayBuffer: arrayBuffer })
                .then(displayResult) // 提取文本并顯示
                .catch(handleError); // 錯誤處理
        };
        reader.readAsArrayBuffer(file); // 讀取文件為字節(jié)流
    }
});

注釋：

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

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

reader.onload：讀取完成后調用的函數。

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

4. 處理讀取的內容并輸出

定義displayResult和handleError函數，通過它們來顯示結果和處理錯誤。

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

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

注釋：

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

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

類圖

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

旅行圖

通過Mermaid語法的旅行圖，可以清晰了解我們實現上述功能的過程。

三、小結

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

四、方法補充

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

示例代碼

把docx文件中表格轉化為json二維數組

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 // 轉化時的一些warning信息
        console.log(messages)

        const table_data: string[][] = []

        // 使用 JSDOM 加載 HTML 內容
        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[] = []
            // 獲取當前行中的所有 <td> 元素
            const cells = row.querySelectorAll("td")

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

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

代碼解釋