在React中用JavaScript提取Word文档中的文本能够显著提升Web应用的交互性和效率，尤其对于需要处理大量文档内容或实现自动化内容分析的应用而言。通过这种技术，用户可以直接上传Word文件，而不必预先转换为其他格式，从而简化了操作流程并提高了用户体验。此外，它还允许开发者即时访问和操作文档文本数据，使得动态生成摘要、关键词提取或是内容过滤等功能变得可行。本文将介绍如何在React中使用JavaScript提取Word文档中的文本。
- 用JavaScript提取Word文档所有文本
- 提取Word文档指定段落或节的文本
- 提取Word文档指定样式的段落的文本
本文所使用的方法需要用到Spire.Doc for JavaScript，npm：npm i spire.doc。
用JavaScript提取Word文档所有文本
我们可以使用Document.GetText()方法直接获取载入的Word文档中的所有文本。以下是操作步骤示例：
- 加载
Spire.Doc.Base.js文件以初始化WebAssembly模块。 - 使用
wasmModule.FetchFileToVFS()方法将Word文件加载到虚拟文件系统中。 - 通过
wasmModule.Document.Create()方法创建一个Document实例。 - 使用
Document.LoadFromFile()方法将Word文档加载到Document实例中。 - 通过
Document.GetText()方法获取文档的文本作为字符串。
代码示例
import React, { useState, useEffect } from 'react';
function App() {
// 定义两个状态：`wasmModule` 用于存储 WebAssembly 模块，`loadingError` 用于捕获加载错误
const [wasmModule, setWasmModule] = useState(null);
const [loadingError, setLoadingError] = useState(null);
useEffect(() => {
let script;
// 使用立即调用函数表达式 (IIFE) 来处理异步操作
(async () => {
try {
// 创建一个 Promise，用于在 WebAssembly 模块初始化时解析
const wasmInitialized = new Promise((resolve, reject) => {
window.Module = {
onRuntimeInitialized: () => resolve(window.spiredoc), // 成功时解析为 `window.spiredoc`
onError: (error) => reject(error) // 发生错误时触发拒绝
};
});
// 创建 script 元素来加载 WebAssembly 的 JavaScript 文件
script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Doc.Base.js`;
script.async = true; // 确保脚本异步加载
// 将 script 添加到文档 body，并等待加载完成
document.body.appendChild(script);
await wasmInitialized;
// WebAssembly 初始化完成后，将模块设置到 `wasmModule` 状态
setWasmModule(window.spiredoc);
} catch (err) {
console.error('加载 WebAssembly 模块失败:', err);
setLoadingError(err); // 捕获错误并存储到状态
}
})();
// 清理函数：组件卸载时移除 script
return () => {
if (script && script.parentNode) {
script.parentNode.removeChild(script);
}
delete window.Module; // 删除全局的 Module 对象
};
}, []);
// 提取 Word 文档中的所有文本
const ExtractAllTextFromWord = async () => {
if (!wasmModule) return; // 如果模块未加载则退出
try {
// 定义输入和输出文件名
const inputFileName = '示例.docx';
const outputFileName = 'ExtractWordText.txt';
// 将输入文件加载到虚拟文件系统 (VFS)
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的 Document 实例并加载输入文件
const doc = wasmModule.Document.Create();
doc.LoadFromFile({ fileName: inputFileName });
// 从文档中提取所有文本
const documentText = doc.GetText();
doc.Dispose(); // 释放资源
// 创建一个 Blob 对象用于存储提取的文本，并创建下载链接
const blob = new Blob([documentText], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = outputFileName;
a.style.display = "none"; // 隐藏链接
document.body.appendChild(a);
a.click(); // 触发下载
window.URL.revokeObjectURL(url); // 释放 URL 对象
document.body.removeChild(a);
} catch (error) {
console.error('处理文档时发生错误:', error);
}
};
// 如果加载 WebAssembly 模块时出错，显示错误信息
if (loadingError) {
return <div>加载 WebAssembly 模块时出错</div>;
}
// 渲染 UI
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>使用 React 和 JavaScript 提取 Word 文档中的文本</h1>
<button onClick={ExtractAllTextFromWord} disabled={!wasmModule}>
提取并下载
</button>
</div>
);
}
export default App;结果
提取Word文档指定段落或节的文本
如果需要提取指定段落或节的文本，我们可以先使用Document.Sections.get_Item()方法获取指定节，然后再遍历文档段落，或直接使用Section.Paragraphs.get_Item().Text属性获取节的所有文本或节中指定段落的文本。以下是操作步骤示例：
- 加载
Spire.Doc.Base.js文件以初始化WebAssembly模块。 - 使用
wasmModule.FetchFileToVFS()方法将Word文件加载到虚拟文件系统。 - 通过调用
wasmModule.Document.Create()方法创建一个Document实例。 - 利用
Document.LoadFromFile()方法将Word文档加载到Document实例中。 - 使用
Document.Sections.get_Item()方法访问特定节。 - 通过
Section.Paragraphs.get_Item().Text属性提取特定段落的文本内容。 - 若需获取章节内的所有文本，可以遍历该章节的所有段落。
代码示例
import React, { useState, useEffect } from 'react';
function App() {
// 定义两个状态：`wasmModule` 用于存储 WebAssembly 模块，`loadingError` 用于捕获加载错误
const [wasmModule, setWasmModule] = useState(null);
const [loadingError, setLoadingError] = useState(null);
useEffect(() => {
let script;
// 使用立即调用函数表达式 (IIFE) 来处理异步操作
(async () => {
try {
// 创建一个 Promise，用于在 WebAssembly 模块初始化时解析
const wasmInitialized = new Promise((resolve, reject) => {
window.Module = {
onRuntimeInitialized: () => resolve(window.spiredoc), // 成功时解析为 `window.spiredoc`
onError: (error) => reject(error) // 发生错误时触发拒绝
};
});
// 创建 script 元素来加载 WebAssembly 的 JavaScript 文件
script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Doc.Base.js`;
script.async = true; // 确保脚本异步加载
// 将 script 添加到文档 body，并等待加载完成
document.body.appendChild(script);
await wasmInitialized;
// WebAssembly 初始化完成后，将模块设置到 `wasmModule` 状态
setWasmModule(window.spiredoc);
} catch (err) {
console.error('加载 WebAssembly 模块失败:', err);
setLoadingError(err); // 捕获错误并存储到状态
}
})();
// 清理函数：组件卸载时移除 script
return () => {
if (script && script.parentNode) {
script.parentNode.removeChild(script);
}
delete window.Module; // 删除全局的 Module 对象
};
}, []);
// 提取 Word 文档中的所有文本
const ExtractTextWordSectionParagraph = async () => {
if (!wasmModule) return; // 如果模块未加载则退出
try {
// 定义输入和输出文件名
const inputFileName = '示例.docx';
const outputFileName = 'ExtractWordText.txt';
// 将输入文件加载到虚拟文件系统 (VFS)
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的 Document 实例并加载输入文件
const doc = wasmModule.Document.Create();
doc.LoadFromFile({ fileName: inputFileName });
// 从文档中获取一个节
const section = doc.Sections.get_Item(1)
// 获取节中指定段落的文本
//const paragraphText = section.Paragraphs.get_Item(0).Text;
// 获取节中的所有文本
let sectionText = '';
for (let i = 0; i < section.Paragraphs.Count; i++) {
sectionText += (section.Paragraphs.get_Item(i).Text + '\n');
}
doc.Dispose(); // 释放资源
// 创建一个 Blob 对象用于存储提取的文本，并创建下载链接
const blob = new Blob([sectionText], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = outputFileName;
a.style.display = "none"; // 隐藏链接
document.body.appendChild(a);
a.click(); // 触发下载
window.URL.revokeObjectURL(url); // 释放 URL 对象
document.body.removeChild(a);
} catch (error) {
console.error('处理文档时发生错误:', error);
}
};
// 如果加载 WebAssembly 模块时出错，显示错误信息
if (loadingError) {
return <div>加载 WebAssembly 模块时出错</div>;
}
// 渲染 UI
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>使用 React 和 JavaScript 提取 Word 文档中的文本</h1>
<button onClick={ExtractTextWordSectionParagraph} disabled={!wasmModule}>
提取并下载
</button>
</div>
);
}
export default App;结果
提取Word文档指定样式的段落的文本
Paragraph.StyleName属性可以获取到Word文档中段落所应用的样式名称。我们可以定义一个段落样式名或直接从文档的段落中获取一个，然后遍历文档的所有段落，逐一检查它们的样式名称。当样式名称匹配目标样式时，即可提取相应段落的文本，从而实现对特定样式段落的文本提取。以下是操作步骤示例：
- 加载
Spire.Doc.Base.js文件以初始化WebAssembly模块。 - 使用
wasmModule.FetchFileToVFS()方法将Word 文件加载到虚拟文件系统中。 - 通过
wasmModule.Document.Create()方法在WebAssembly模块中创建一个Document实例。 - 利用
Document.LoadFromFile()方法将Word文档加载到Document实例中。 - 定义目标样式名称，或从文档中获取一个目标样式名称。
遍历文档的章节及其段落：
- 使用
Paragraph.StyleName属性确定每个段落的样式。 - 将段落的样式名称与目标样式名称进行比较。如果匹配，则使用
Paragraph.Text属性检索段落文本。
- 使用
代码示例
import React, { useState, useEffect } from 'react';
function App() {
// 定义两个状态：`wasmModule` 用于存储 WebAssembly 模块，`loadingError` 用于捕获加载错误
const [wasmModule, setWasmModule] = useState(null);
const [loadingError, setLoadingError] = useState(null);
useEffect(() => {
let script;
// 使用立即调用函数表达式 (IIFE) 来处理异步操作
(async () => {
try {
// 创建一个 Promise，用于在 WebAssembly 模块初始化时解析
const wasmInitialized = new Promise((resolve, reject) => {
window.Module = {
onRuntimeInitialized: () => resolve(window.spiredoc), // 成功时解析为 `window.spiredoc`
onError: (error) => reject(error) // 发生错误时触发拒绝
};
});
// 创建 script 元素来加载 WebAssembly 的 JavaScript 文件
script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Doc.Base.js`;
script.async = true; // 确保脚本异步加载
// 将 script 添加到文档 body，并等待加载完成
document.body.appendChild(script);
await wasmInitialized;
// WebAssembly 初始化完成后，将模块设置到 `wasmModule` 状态
setWasmModule(window.spiredoc);
} catch (err) {
console.error('加载 WebAssembly 模块失败:', err);
setLoadingError(err); // 捕获错误并存储到状态
}
})();
// 清理函数：组件卸载时移除 script
return () => {
if (script && script.parentNode) {
script.parentNode.removeChild(script);
}
delete window.Module; // 删除全局的 Module 对象
};
}, []);
// 提取 Word 文档中的所有文本
const ExtractTextWordParagraphStyle = async () => {
if (!wasmModule) return; // 如果模块未加载则退出
try {
// 定义输入和输出文件名
const inputFileName = '示例.docx';
const outputFileName = 'ExtractWordText.txt';
// 将输入文件加载到虚拟文件系统 (VFS)
await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);
// 创建一个新的 Document 实例并加载输入文件
const doc = wasmModule.Document.Create();
doc.LoadFromFile({ fileName: inputFileName });
// 定义一个段落样式名或从文档中的段落获取
const paragraphStyleName = 'Heading2';
//const paragraphStyleName = doc.Sections.get_Item(1).Paragraphs.get_Item(0).StyleName;
// 遍历文档中的节以及节中的段落
let documentText = '';
for (let i = 0; i < doc.Sections.Count; i++) {
const section = doc.Sections.get_Item(i);
for (let j = 0; j < section.Paragraphs.Count; j++) {
const paragraph = section.Paragraphs.get_Item(j);
if (paragraph.StyleName === paragraphStyleName) {
// 获取符合样式的段落的文本
documentText += paragraph.Text + '\n';
}
}
}
doc.Dispose(); // 释放资源
// 创建一个 Blob 对象用于存储提取的文本，并创建下载链接
const blob = new Blob([documentText], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = outputFileName;
a.style.display = "none"; // 隐藏链接
document.body.appendChild(a);
a.click(); // 触发下载
window.URL.revokeObjectURL(url); // 释放 URL 对象
document.body.removeChild(a);
} catch (error) {
console.error('处理文档时发生错误:', error);
}
};
// 如果加载 WebAssembly 模块时出错，显示错误信息
if (loadingError) {
return <div>加载 WebAssembly 模块时出错</div>;
}
// 渲染 UI
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>使用 React 和 JavaScript 提取 Word 文档中的文本</h1>
<button onClick={ExtractTextWordParagraphStyle} disabled={!wasmModule}>
提取并下载
</button>
</div>
);
}
export default App;结果
本文演示了如何使用JavaScript在React应用中实现Word文档文本的提取，包括所有文本、指定部分以及指定样式文本的提取。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。