导读：传统 Word 转文本大多依赖后端服务、Office COM 组件或者在线转换接口，存在部署成本高、文件外传、并发受限等问题。借助 WebAssembly 版本的文档处理库，我们可以完全在前端浏览器内完成 .docx 到 .txt 的转换，不需要后端中转，保障文档数据不出本地。本文基于 React + Spire.Doc for WebAssembly，给出一套可运行的转换方案并拆解实现细节。

方案概述

本方案核心能力：

  • ✅ 纯前端运行：所有文档解析、格式转换逻辑跑在浏览器 WASM 环境
  • ✅ 无需上传文件到服务器：文档全程在用户本地内存与虚拟文件系统（VFS）处理
  • ✅ 输出标准 TXT：提取 Word 正文内容，去除富文本样式、图片、版式信息，生成纯文本
  • ✅ 资源自动释放：主动释放文档对象，避免 WASM 内存持续泄漏

依赖说明：示例基于 Spire.Doc WebAssembly 模块，提前在页面初始化完成 wasmModule、spire、dotnetRuntime 挂载，适合 React SPA 项目。

完整示例代码

function App() {
  const WordToTxt = async () => {
    const docModule = window.wasmModule?.spiredoc;
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

// Load the sample file into VFS

let inputFileName = "WordToTxt.docx";

await window.spire.FetchFileToVFS(inputFileName, "", ${process.env.PUBLIC_URL}/static/data/);


// Create a document instance

const doc = new docModule.Document();


// Load the document from the virtual file system

doc.LoadFromFile(inputFileName);


// Define the output file name

const outputFileName = "WordToTxt-result.txt";


// Save the document as plain text

doc.SaveToFile({fileName: outputFileName, fileFormat: docModule.FileFormat.Txt});


// Release resources

doc.Dispose();


const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

const blob = new Blob([modifiedFileArray], { type: 'text/plain;charset=utf-8' });

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = outputFileName;

a.click();

URL.revokeObjectURL(url);

};


return (

<div style={{ textAlign: 'center', height: '300px' }}>

<h1>Convert Word To TXT</h1>

<button onClick={WordToTxt}>Generate</button>

</div>

);

}

export default App;

代码逐段解析

1. 前置模块校验

const docModule = window.wasmModule?.spiredoc;
if (!docModule) {
  alert('Spire.Doc is not ready yet');
  return;
}

WASM 模块加载是异步过程，页面渲染完成时不一定就绪。这里做保护判断，如果文档模块还未初始化，直接弹窗提示，避免后续调用报错。在实际项目中，推荐增加加载状态、进度条，而不是简单 alert。

2. 将本地资源文件加载到 WASM 虚拟文件系统（VFS）

let inputFileName = "WordToTxt.docx";
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/static/data/`);

WASM 运行环境拥有独立的虚拟文件系统，不能直接读取浏览器 public 目录资源。FetchFileToVFS 的作用是通过 fetch 把静态目录下的 docx 文件拉取，写入 VFS，供 WASM 侧接口读取。

拓展：如果需要支持用户上传任意 Word 文件，可改用 FileReader，将用户选择的 File 对象写入 VFS，而不是固定拉取静态示例文件。

3. 加载文档并执行格式转换

const doc = new docModule.Document();
doc.LoadFromFile(inputFileName);

const outputFileName = "WordToTxt-result.txt";

doc.SaveToFile({fileName: outputFileName, fileFormat: docModule.FileFormat.Txt});

  • new Document()：实例化文档对象
  • LoadFromFile：从虚拟文件系统加载 docx
  • SaveToFile：核心转换接口，指定输出格式为 Txt，引擎自动解析段落、文本，丢弃字体、颜色、表格样式、嵌入对象等富文本信息，只保留文本内容。

4. 释放文档资源（非常关键）

doc.Dispose();

WASM 的内存不受 JS GC 完全管控，文档对象占用的原生内存不会随 JS 对象回收自动释放。必须显式调用 Dispose，长期循环转换场景下，如果遗漏这一步，会造成内存持续上涨，最终页面卡顿、崩溃。

5. 读取 VFS 输出文件，触发浏览器下载

const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);

转换后的 TXT 文件保存在 WASM 的 FS 里，JS 需要调用 FS.readFile 获取字节数组，再包装为 Blob，通过动态创建 <a> 标签实现浏览器下载。

进阶改造：支持用户上传任意 Word 文件

上面示例是读取固定静态文件，在业务里更常见的是让用户上传。简单改造思路：

  1. 在页面增加 <input type="file" accept=".docx"/>
  2. 通过 FileReader.readAsArrayBuffer 读取用户选中文件
  3. 将二进制数组写入 VFS
  4. 复用后续加载、转换、导出逻辑

这样就不再局限于预放置在 public 目录的示例文档。

小结

借助 WebAssembly，JavaScript 已经可以在浏览器内独立完成 Word 到 TXT 的转换。这套方案把文档解析能力下沉到前端，消除文件上传链路，适合对数据私密性有要求的文档文本提取场景。核心流程可以概括为：加载 WASM → 文件写入虚拟文件系统 → 文档载入 → 另存为文本格式 → 释放资源 → 读取字节流并下载。