JavaScript实现纯前端提取Word文本的完整教程

npm i spire.office

import React, { useState, useEffect } from 'react';

function App() {
  const [wasmModule, setWasmModule] = useState(null);
  const [selectedFile, setSelectedFile] = useState(null);
  const [isExtracting, setIsExtracting] = useState(false);
  const [error, setError] = useState(null);
  const [fontLoaded, setFontLoaded] = useState(false);

  // 加载 Spire.Doc WASM 模块
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(
          /* webpackIgnore: true */ `${publicUrl}/spire.doc.js`
        );
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function'
          ? await rawModule({
              locateFile: (p) =>
                p.endsWith('.wasm') ? `${publicUrl}/${p}` : p,
            })
          : rawModule;
        setWasmModule(window.wasmModule);
      } catch (err) {
        console.error('WASM 加载失败:', err);
        setError('无法加载文档处理引擎，请刷新页面重试。');
      }
    })();
  }, []);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      setSelectedFile(file);
      setError(null);
    }
  };

  const extractTextFromUploadedFile = async () => {
    if (!selectedFile) {
      setError('请先选择一个 Word 文档。');
      return;
    }

    const wasmDoc = window.wasmModule?.spiredoc;
    if (!wasmDoc) {
      setError('文档引擎尚未加载，请稍候。');
      return;
    }

    setIsExtracting(true);
    setError(null);

    try {
      // 3.3.1 预加载字体（仅加载一次）
      if (!fontLoaded) {
        await window.spire.FetchFileToVFS(
          'Arial.ttf',
          '/Library/Fonts/',
          `${process.env.PUBLIC_URL}/static/font/`
        );
        setFontLoaded(true);
      }

      // 3.3.2 将用户上传的文件读为 Uint8Array
      const arrayBuffer = await selectedFile.arrayBuffer();
      const uint8Array = new Uint8Array(arrayBuffer);
      const fileName = selectedFile.name;

      // 写入 VFS
      window.dotnetRuntime.Module.FS.writeFile(fileName, uint8Array);

      // 3.3.3 创建 Document 实例并加载文件
      const doc = new wasmDoc.Document();
      doc.LoadFromFile(fileName);

      // 3.3.4 提取全部文本
      const documentText = doc.GetText();

      // 3.3.5 释放资源
      doc.Dispose();

      // 3.3.6 下载文本文件
      const blob = new Blob([documentText], { type: 'text/plain;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `extracted_${selectedFile.name.replace(/\.[^.]+$/, '')}.txt`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

      // 清理 VFS 中的临时文件
      window.dotnetRuntime.Module.FS.unlink(fileName);

      // 重置状态
      setSelectedFile(null);
      document.getElementById('fileInput').value = '';
    } catch (err) {
      console.error('提取失败:', err);
      setError(`提取失败：${err.message || '未知错误'}`);
    } finally {
      setIsExtracting(false);
    }
  };

  return (
    <div style={{ maxWidth: '600px', margin: '50px auto', textAlign: 'center' }}>
      <h1>📄 从 Word 提取文本</h1>
      <p style={{ color: '#666' }}>选择本地的 .doc 或 .docx 文件，提取全部文本内容</p>
      <div style={{ margin: '30px 0' }}>
        <input
          id="fileInput"
          type="file"
          accept=".doc,.docx"
          onChange={handleFileChange}
          disabled={!wasmModule || isExtracting}
          style={{ display: 'none' }}
        />
        <label
          htmlFor="fileInput"
          style={{
            display: 'inline-block',
            padding: '10px 20px',
            background: '#f0f0f0',
            borderRadius: '4px',
            cursor: 'pointer',
            border: '1px solid #ccc',
          }}
        >
          {selectedFile ? `已选：${selectedFile.name}` : '选择 Word 文档'}
        </label>
      </div>
      {selectedFile && (
        <button
          onClick={extractTextFromUploadedFile}
          disabled={!wasmModule || isExtracting}
          style={{
            padding: '12px 30px',
            fontSize: '16px',
            backgroundColor: '#007bff',
            color: '#fff',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            marginTop: '10px',
          }}
        >
          {isExtracting ? '提取中...' : '提取并下载文本'}
        </button>
      )}
      {error && (
        <div style={{ marginTop: '20px', color: '#d32f2f', background: '#ffebee', padding: '10px', borderRadius: '4px' }}>
          {error}
        </div>
      )}
      {!wasmModule && !error && (
        <div style={{ marginTop: '20px', color: '#888' }}>⏳ 文档引擎加载中，请稍候...</div>
      )}
    </div>
  );
}
export default App;

npm start

const doc = new wasmDoc.Document();
doc.LoadFromFile(fileName);

// 获取第一个节（Section）
const section = doc.Sections.get_Item(0);
// 获取该节中的第一个段落
const paragraph = section.Paragraphs.get_Item(0);
// 提取该段落的文本
const text = paragraph.Text;