如何通过Office JS的Word API实现Word文档条件渲染（文本隐显）

核心思路是利用Word API中Range.font.hidden属性控制文本可见性：设置为true时文本隐藏，false时恢复显示。以下是具体实现方案：

一、基础实现：隐藏选中文本 + 显示所有隐藏文本 #

1. 隐藏选中文本的函数 #

该函数获取当前用户选中的文本范围，将其字体隐藏属性设为true：

async function hideSelectedText() {
  await Word.run(async (context) => {
    const selection = context.document.getSelection();
    selection.font.hidden = true;
    await context.sync();
  }).catch((error) => {
    console.error("隐藏文本失败:", error);
    if (error instanceof OfficeExtension.Error) {
      console.error("错误详情:", JSON.stringify(error.debugInfo));
    }
  });
}

2. 显示所有隐藏文本的函数 #

该函数查找文档中所有标记为隐藏的文本范围，将其隐藏属性设为false：

async function showHiddenText() {
  await Word.run(async (context) => {
    const hiddenRanges = context.document.body.findText("", { matchHidden: true });
    hiddenRanges.load("items");
    await context.sync();

    hiddenRanges.items.forEach(range => {
      range.font.hidden = false;
    });
    await context.sync();
  }).catch((error) => {
    console.error("显示文本失败:", error);
    if (error instanceof OfficeExtension.Error) {
      console.error("错误详情:", JSON.stringify(error.debugInfo));
    }
  });
}

3. 绑定按钮触发函数 #

在任务窗格HTML中添加按钮，绑定上述函数：

<button onclick="hideSelectedText()">隐藏选中文本</button>
<button onclick="showHiddenText()">显示所有隐藏文本</button>

二、进阶实现：精准控制特定隐藏文本 #

如果需要只恢复之前通过脚本隐藏的文本（而非所有隐藏文本），可以给隐藏的文本添加自定义标签，后续通过标签精准查找：

1. 带标签的隐藏函数 #

async function hideSelectedTextWithTag() {
  await Word.run(async (context) => {
    const selection = context.document.getSelection();
    selection.font.hidden = true;
    // 添加自定义标签，用于后续识别
    selection.tags.add("hidden-by-custom-script");
    await context.sync();
  }).catch((error) => {
    console.error("隐藏文本失败:", error);
  });
}

2. 根据标签恢复文本的函数 #

async function showTaggedHiddenText() {
  await Word.run(async (context) => {
    const taggedRanges = context.document.body.getRange().getTags("hidden-by-custom-script");
    taggedRanges.load("items");
    await context.sync();

    taggedRanges.items.forEach(range => {
      range.font.hidden = false;
      // 移除标签，避免重复处理
      range.tags.remove("hidden-by-custom-script");
    });
    await context.sync();
  }).catch((error) => {
    console.error("显示文本失败:", error);
  });
}

注意事项 #

• 确保脚本在Office.initialize完成后执行，避免API调用失败
• 若要将按钮添加到Word的功能区（Ribbon），需要通过Office自定义功能区清单文件配置，将按钮点击事件关联到上述函数

内容的提问来源于stack exchange，提问作者Shiv Yadav