导读：传统 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：从虚拟文件系统加载 docxSaveToFile：核心转换接口，指定输出格式为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 文件
上面示例是读取固定静态文件，在业务里更常见的是让用户上传。简单改造思路：
- 在页面增加
<input type="file" accept=".docx"/> - 通过
FileReader.readAsArrayBuffer读取用户选中文件 - 将二进制数组写入 VFS
- 复用后续加载、转换、导出逻辑
这样就不再局限于预放置在 public 目录的示例文档。
小结
借助 WebAssembly，JavaScript 已经可以在浏览器内独立完成 Word 到 TXT 的转换。这套方案把文档解析能力下沉到前端，消除文件上传链路，适合对数据私密性有要求的文档文本提取场景。核心流程可以概括为：加载 WASM → 文件写入虚拟文件系统 → 文档载入 → 另存为文本格式 → 释放资源 → 读取字节流并下载 。