将文档中的特定占位文本替换为图片或表格，是实际开发中频率极高的需求——例如将合同尾部「（签章处）」替换为公司印章图片、将数据汇总占位符替换为统计表格等。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成此类替换操作，通过虚拟文件系统（VFS）管理字体、图片及文档文件，无需后端服务支持。

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

• 文本替换为图片
• 文本替换为表格

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

文本替换为图片

将文本替换为图片的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件、目标图片和 Word 文档载入 WASM 虚拟文件系统；然后调用 FindAllString 查找所有匹配的目标文本，遍历每个匹配位置，通过 DocPicture 加载图片并用 ChildObjects.Insert 插入图片，再用 ChildObjects.Remove 移除原文本；最后保存文档，从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

import React, { useState } from 'react';

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

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

    // 将图片和 Word 文档载入 VFS
    let pngName = 'E-iceblue.png';
    await window.spire.FetchFileToVFS(pngName, '', `${process.env.PUBLIC_URL}/data/`);

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

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

    // 查找所有匹配的文本
    let selections = doc.FindAllString('E-iceblue', true, true);

    // 遍历每个匹配位置，将文本替换为图片
    for (let i = 0; i < selections.length; i++) {
      // 创建 DocPicture 对象并加载图片
      let pic = new docModule.DocPicture(doc);
      pic.LoadImage(pngName);
      let selection = selections[i];
      // 获取当前文本范围
      let range = selection.GetAsOneRange();
      // 获取 TextRange 在其所属段落 ChildObjects 中的索引
      let index = range.OwnerParagraph.ChildObjects.IndexOf(range);
      // 在 TextRange 位置插入图片
      range.OwnerParagraph.ChildObjects.Insert(index, pic);
      // 移除原 TextRange
      range.OwnerParagraph.ChildObjects.Remove(range);
    }

    // 定义输出文件名并保存
    const outputFileName = 'ReplaceWithImage_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={ReplaceWithImage}>
        生成
      </button>
    </div>
  );
}

export default App;

文档中的目标文本被查找并替换为指定图片后的效果

文本替换为表格

将文本替换为表格的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文档载入 WASM 虚拟文件系统；然后调用 FindString 查找指定文本，通过 GetAsOneRange 获取文本范围，再通过 OwnerTextBody.ChildObjects 获取段落索引，创建新表格后用 ChildObjects.Remove 移除原段落，并用 ChildObjects.Insert 在相同位置插入表格；最后保存文档，从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

import React, { useState } from 'react';

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

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

    // 将字体文件载入 VFS
    await window.spire.FetchFileToVFS('msyh.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

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

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

    // 获取第一个章节
    let section = doc.Sections.get_Item(0);

    // 查找目标文本
    let selection = doc.FindString('Christmas Day, December 25', true, true);

    // 获取文本范围及所属段落
    let range = selection.GetAsOneRange();
    let paragraph = range.OwnerParagraph;

    // 获取段落所属的文本体，计算段落索引
    let body = paragraph.OwnerTextBody;
    let index = body.ChildObjects.IndexOf(paragraph);

    // 创建 3×3 表格
    let table = section.AddTable(true);
    table.ResetCells(3, 3);

    // 移除原段落，在相同位置插入表格
    body.ChildObjects.Remove(paragraph);
    body.ChildObjects.Insert(index, table);

    // 定义输出文件名并保存
    const outputFileName = 'ReplaceTextWithTable_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={ReplaceTextWithTable}>
        生成
      </button>
    </div>
  );
}

export default App;

文档中的目标段落被移除后，在相同位置插入指定规格的表格

常见问题

插入图片后文档中图片不显示

原因：图片文件未加载到 WASM 虚拟文件系统，或 FetchFileToVFS 加载路径不正确，导致 DocPicture.LoadImage 无法从 VFS 中读取图片数据。

解决：确保在调用 LoadImage 之前，已通过 FetchFileToVFS 将图片文件正确载入 VFS，并检查文件名称与路径是否一致：

await window.spire.FetchFileToVFS(
  'E-iceblue.png', '', `${process.env.PUBLIC_URL}/data/`
);

表格插入位置与预期不符

原因：通过 OwnerTextBody.ChildObjects.IndexOf 获取的段落索引不准确，或选中的文本跨多个段落导致索引偏移，使表格插入到了错误的位置。

解决：先确认 FindString 查找的文本位于单个段落内，然后通过 GetAsOneRange 获取准确的 OwnerParagraph，再获取其在 OwnerTextBody.ChildObjects 中的索引：

let range = selection.GetAsOneRange();
let paragraph = range.OwnerParagraph;
let body = paragraph.OwnerTextBody;
let index = body.ChildObjects.IndexOf(paragraph);

获取免费许可证

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