将文档中的特定文本替换为域代码或另一个文档的内容，是文档自动化中非常实用的需求——例如将模板中的「当前日期」占位符替换为日期域（DATE Field），使其在每次打开文档时自动更新为系统日期；或将合同模板中的「条款内容」占位符替换为另一个 Word 文档中的详细条款内容，实现文档的模块化组装。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成此类替换操作，通过虚拟文件系统（VFS）管理字体及文档文件，无需后端服务支持。

本文介绍两个核心功能点：

• 文本替换为域
• 文本替换为另一个文档

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。

文本替换为域

将文本替换为域的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文档载入 WASM 虚拟文件系统；然后调用 FindString 查找目标文本，获取其所在段落及索引位置，创建 Field 对象并指定域类型（如 FieldDate），依次在段落中插入 Field、FieldMark(FieldSeparator)、FieldMark(FieldEnd) 以构建完整的域结构，最后移除原文本；最后保存文档，从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

import React, { useState } from 'react';

function App() {
  const ReplaceTextWithField = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将 Word 文档载入 VFS
    let inputFileName = 'ReplaceTextWithField.docx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

    // 加载文档
    const doc = new docModule.Document();
    doc.LoadFromFile(inputFileName);

    // 查找目标文本
    let selection = doc.FindString({
      stringValue: 'summary',
      caseSensitive: false,
      wholeWord: true,
    });

    // 获取文本范围及其所在段落
    let textRange = selection.GetAsOneRange();
    let ownParagraph = textRange.OwnerParagraph;
    let rangeIndex = ownParagraph.ChildObjects.IndexOf(textRange);

    // 创建日期域（DATE Field）
    let eqField = new docModule.Field(doc);
    eqField.Type = docModule.FieldType.FieldDate;
    eqField.Code = 'DATE \\@ "yyyyMMdd "';

    // 依次插入 Field、FieldSeparator、FieldEnd
    ownParagraph.ChildObjects.Insert(rangeIndex, eqField);

    let mark = new docModule.FieldMark(doc, docModule.FieldMarkType.FieldSeparator);
    ownParagraph.ChildObjects.Insert(rangeIndex + 1, mark);

    let end = new docModule.FieldMark(doc, docModule.FieldMarkType.FieldEnd);
    ownParagraph.ChildObjects.Insert(rangeIndex + 2, end);

    // 移除原文本
    ownParagraph.ChildObjects.Remove(textRange);

    // 定义输出文件名并保存
    const outputFileName = 'ReplaceTextWithField_output.docx';
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

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

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    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>在 Word 文档中将文本替换为域</h1>
      <button onClick={ReplaceTextWithField}>
        生成
      </button>
    </div>
  );
}

export default App;

文档中的目标文本被替换为日期域后，打开文档时会自动显示当前系统日期

文本替换为另一个文档

将文本替换为另一个文档的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和两个 Word 文档（主文档和待替换内容文档）载入 WASM 虚拟文件系统；然后分别实例化两个 Document 对象加载两个文档，在主文档上调用 Replace 方法并传入 matchDoc 参数（指向另一个文档对象），将匹配的文本替换为该文档的全部内容；最后保存文档，从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

import React, { useState } from 'react';

function App() {
  const ReplaceWithDocument = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将两个 Word 文档载入 VFS
    let inputFileName1 = 'Text2.docx';
    await window.spire.FetchFileToVFS(inputFileName1, '', `${process.env.PUBLIC_URL}/data/`);

    let inputFileName2 = 'Text1.docx';
    await window.spire.FetchFileToVFS(inputFileName2, '', `${process.env.PUBLIC_URL}/data/`);

    // 加载主文档
    let doc = new docModule.Document();
    doc.LoadFromFile(inputFileName1);

    // 加载另一个文档（替换内容）
    let replaceDoc = new docModule.Document();
    replaceDoc.LoadFromFile(inputFileName2);

    // 用另一个文档的内容替换指定文本
    doc.Replace({
      matchString: 'Document1',
      matchDoc: replaceDoc,
      caseSensitive: false,
      wholeWord: true,
    });

    // 定义输出文件名并保存
    const outputFileName = 'ReplaceWithDocument_output.docx';
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

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

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    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>在 Word 文档中将文本替换为另一个文档</h1>
      <button onClick={ReplaceWithDocument}>
        生成
      </button>
    </div>
  );
}

export default App;

主文档中的占位文本被另一个文档的全部内容替换后的效果

常见问题

插入域后文档中不显示域值

原因：Field、FieldMark(FieldSeparator)、FieldMark(FieldEnd) 三者没有按照正确的顺序插入，破坏了域结构的完整性，导致 Word 无法正确识别和计算域值。

解决：确保按顺序依次插入 Field、FieldSeparator、FieldEnd，且插入索引连续递增：

ownParagraph.ChildObjects.Insert(rangeIndex, eqField);
ownParagraph.ChildObjects.Insert(rangeIndex + 1, mark);
ownParagraph.ChildObjects.Insert(rangeIndex + 2, end);

另一个文档内容未正确替换

原因：Replace 方法中 matchDoc 参数传入的文档对象未正确加载到 VFS 中，或文件路径/名称与 FetchFileToVFS 载入时不一致，导致 LoadFromFile 无法找到目标文件。

解决：确认两个文档均已通过 FetchFileToVFS 载入 VFS，并在调用 Replace 之前分别创建 Document 对象并成功加载：

let doc = new docModule.Document();
doc.LoadFromFile('Text2.docx');

let replaceDoc = new docModule.Document();
replaceDoc.LoadFromFile('Text1.docx');

doc.Replace({
  matchString: 'Document1',
  matchDoc: replaceDoc,
  caseSensitive: false,
  wholeWord: true,
});

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。