在 Word 文档中，为关键段落或语句填充底色，可以起到突出重点、区分内容层次的作用。报告中的结论段、合同里的关键条款、培训材料中的要点，都适合用底色加以标注。相比逐一手工设置，通过代码批量处理更适用于固定格式的文档，也更容易接入自动化的文档生成流程。

本文使用 Spire.Doc for JavaScript 在浏览器中为 Word 文档的指定段落或文本添加底色。文档通过虚拟文件系统（VFS）加载，处理完成后直接触发下载，整个过程基于 WebAssembly 在浏览器端完成，无需安装 Office，也不依赖任何后端。

本文介绍两个功能点：

• 为指定段落添加底色
• 为指定文本添加底色

两种方式的适用范围不同：段落底色作用于整个段落区域，显示为一整块矩形；文本底色只覆盖被选中的字符。示例从 public/data 读取 示例文档.docx，运行时请把该文件放入项目的 public/data 目录。

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。下面的示例假定 Spire.Doc 已安装、WebAssembly 模块已初始化。

为指定段落添加底色

Spire.Doc for JavaScript 通过 Paragraph.Format.BackColor 属性为指定段落添加底色。只要取得目标段落对象，为其 Format.BackColor 赋一个 Color 值即可，底色的覆盖范围包括段落的行距和首行缩进留出的空白。

本节涉及的成员如下：

具体操作步骤如下：

1. 获取 Spire.Doc 的 WASM 模块，确认已就绪。
2. 载入字体与示例文档，创建 Document 对象并加载该文件。
3. 通过 Document.Sections 取得第一节，再从 Section.Paragraphs 取出目标段落。
4. 为 Paragraph.Format.BackColor 赋值，设置段落背景颜色。
5. 使用 Document.SaveToFile() 保存结果文件，从 VFS 读出并触发浏览器下载。

示例文档中需要设置底色的段落为第 6 个段落（索引 5），即「综合来看，现有架构已难以支撑……」这一段。

为指定段落添加底色的代码如下：

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

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

    // 载入示例文档
    await window.spire.FetchFileToVFS('示例文档.docx', '', `${process.env.PUBLIC_URL}/data/`);

    // 创建 Document 实例并加载文档
    const doc = new wasmModule.Document();
    doc.LoadFromFile('示例文档.docx');

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

    // 获取第 6 个段落（索引 5）
    const paragraph = section.Paragraphs.get_Item(5);

    // 为该段落设置背景颜色
    paragraph.Format.BackColor = wasmModule.Color.FromArgb(255, 255, 235, 59);

    // 保存结果文件
    const outputFileName = '段落底色.docx';
    doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { 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>为指定段落添加底色</h1>
      <button onClick={setParagraphBackColor}>
        为段落添加底色
      </button>
    </div>
  );
}

export default App;

为指定段落添加底色后的文档如下，结论段显示为一整块黄色区域：

为指定文本添加底色

为指定文本添加底色时，可以先通过 Paragraph.Find() 查找目标文本，再用 TextSelection.GetAsOneRange() 取得文本范围，最后通过 TextRange.CharacterFormat.TextBackgroundColor 设置文本底色。底色只覆盖查找到的字符，段落中的其余文字保持原样。

本节涉及的成员如下：

Paragraph.Find() 的三个参数分别为查找内容、是否区分大小写、是否全字匹配。例如 Find('云计算（Cloud Computing）', true, false) 表示区分大小写、不要求整词匹配。

具体操作步骤如下：

1. 获取 Spire.Doc 的 WASM 模块，确认已就绪。
2. 载入字体与示例文档，创建 Document 对象并加载该文件。
3. 通过 Document.Sections 取得第一节，再从 Section.Paragraphs 取出目标段落。
4. 使用 Paragraph.Find() 在段落中查找指定文本。
5. 使用 TextSelection.GetAsOneRange() 取得查找到的文本范围。
6. 通过 TextRange.CharacterFormat.TextBackgroundColor 为文本范围设置背景颜色。
7. 使用 Document.SaveToFile() 保存结果文件，从 VFS 读出并触发浏览器下载。

示例文档中，要着色的文本「云计算（Cloud Computing）」位于第 3 个段落（索引 2）。

为指定文本添加底色的代码如下：

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

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

    // 载入示例文档
    await window.spire.FetchFileToVFS('示例文档.docx', '', `${process.env.PUBLIC_URL}/data/`);

    // 创建 Document 实例并加载文档
    const doc = new wasmModule.Document();
    doc.LoadFromFile('示例文档.docx');

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

    // 获取第 3 个段落（索引 2）
    const paragraph = section.Paragraphs.get_Item(2);

    // 在段落中查找指定文本
    const selection = paragraph.Find('云计算（Cloud Computing）', true, false);

    // 获取查找到的文本的文本范围
    const range = selection.GetAsOneRange();

    // 为该文本范围设置背景颜色
    range.CharacterFormat.TextBackgroundColor = wasmModule.Color.FromArgb(255, 144, 238, 144);

    // 保存结果文件
    const outputFileName = '文本底色.docx';
    doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { 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>为指定文本添加底色</h1>
      <button onClick={setTextBackColor}>
        为文本添加底色
      </button>
    </div>
  );
}

export default App;

为指定文本添加底色后的文档如下，底色只覆盖「云计算（Cloud Computing）」这一段文字：

为整段文字添加底色

若希望段落中的每个文字块都带底色，而不是整块段落矩形，可以遍历段落的 ChildObjects，对每个 TextRange 设置 TextBackgroundColor：

for (let i = 0; i < paragraph.ChildObjects.Count; i++) {
  const child = paragraph.ChildObjects.get_Item(i);
  if (child.DocumentObjectType === wasmModule.DocumentObjectType.TextRange) {
    child.CharacterFormat.TextBackgroundColor = wasmModule.Color.FromArgb(255, 144, 238, 144);
  }
}

清除已经设置的底色

把颜色设为全透明即可清除底色，段落与文本范围的写法相同：

// 清除段落底色
paragraph.Format.BackColor = wasmModule.Color.FromArgb(0, 0, 0, 0);

// 清除文本底色
range.CharacterFormat.TextBackgroundColor = wasmModule.Color.FromArgb(0, 0, 0, 0);

清除后，对应的底纹填充会写回 auto，文档中不再显示颜色。

常见问题

段落底色和文本底色有什么区别

Paragraph.Format.BackColor 为整个段落区域设置背景，覆盖范围包括行距和首行缩进留出的空白，在页面上呈现为一整块矩形；CharacterFormat.TextBackgroundColor 只作用于 TextRange 中的字符，底色紧贴文字边缘。需要强调整个结论段时使用前者，只需标记句中的关键词时使用后者。

为什么设置的颜色没有生效

BackColor 与 TextBackgroundColor 都要求传入 Color 对象。Spire.Doc for JavaScript 的 Color 只提供 FromArgb(a, r, g, b) 这一种构造方式，没有 Color.Yellow 之类的预定义颜色。若直接赋值 '#FFFF00' 或 0xFFFF00，调用不会抛出异常，但页面上的底色不会生效。颜色值统一写成 Color.FromArgb(255, 255, 235, 59) 这样的形式即可。

查找的文本不存在时为什么会报错

Paragraph.Find() 找不到内容时不会返回 null，而是返回一个空的 TextSelection；此时调用 GetAsOneRange() 会抛出 Arg_NullReferenceException。查找前可以先判断段落文本是否包含目标内容：

if (paragraph.Text.includes('云计算（Cloud Computing）')) {
  const range = paragraph.Find('云计算（Cloud Computing）', true, false).GetAsOneRange();
  range.CharacterFormat.TextBackgroundColor = wasmModule.Color.FromArgb(255, 144, 238, 144);
}

能一次为多个段落设置底色吗

Paragraph.Format.BackColor 针对单个段落，需要处理多段时对 Section.Paragraphs 循环赋值即可。下面的写法为第 5、6 个段落统一设置底色：

const section = doc.Sections.get_Item(0);

for (let i = 4; i <= 5; i++) {
  section.Paragraphs.get_Item(i).Format.BackColor = wasmModule.Color.FromArgb(255, 255, 235, 59);
}

文本被拆成多个片段时还能查到吗

可以。Word 在编辑过程中会把同一句话拆成多个 run，Paragraph.Find() 会跨越这些片段进行匹配，查找到的内容仍可通过 GetAsOneRange() 取得完整的文本范围。

获取免费许可证

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