如何在基于Office.js的Word插件中实现点击锚点跳转至页面/图片区域？

可以实现点击链接跳转至文档内的图片区域或指定页面，核心思路是给目标元素设置书签（锚点），再插入指向该书签的超链接。以下是结合你现有代码的具体实现方案：

1. 给目标元素设置书签（锚点） #

Word中的书签是文档内的定位标记，可绑定图片、段落等元素。你需要先将图片插入文档，并为其添加唯一的书签：

// 插入图片并添加唯一书签
const insertImageWithBookmark = async (imgUrl, bookmarkId) => {
  await Word.run(async (context) => {
    const body = context.document.body;
    // 插入图片到文档末尾（可根据需求修改位置）
    const image = body.insertInlinePictureFromUrl(imgUrl, "End");
    // 用图片ID作为书签名称，确保唯一性
    const bookmarkName = `img_${bookmarkId}`;
    body.bookmarks.add(bookmarkName, image);
    await context.sync();
    return bookmarkName;
  }).catch(error => {
    console.log("插入图片出错: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("调试信息: " + JSON.stringify(error.debugInfo));
    }
  });
};

如果要跳转到特定页面，只需给目标页面的开头段落添加书签即可，逻辑和图片一致。

2. 修改表格插入逻辑，添加跳转链接 #

你原来的代码直接插入纯文本URL，现在需要改为插入指向书签的超链接。修改后的insertTable函数如下：

const [tableRow, setTableRow] = useState([["ID", "Image URL", "Photographer"]]);

const insertTable = async (response) => {
  const { photographer, id: img_id, url: img_url } = response;
  // 先插入图片并获取书签名称
  const bookmarkName = await insertImageWithBookmark(img_url, img_id);
  if (!bookmarkName) return;

  // 更新表格数据
  const table_array = [...tableRow, [img_id, bookmarkName, photographer]];
  setTableRow(table_array);

  // 插入表格并设置超链接
  await Word.run(async (context) => {
    const body = context.document.body;
    body.clear();
    // 创建空表格
    const table = body.insertTable(table_array.length, 3, "End");

    // 遍历填充表格内容，为第二列添加跳转链接
    table_array.forEach((rowData, rowIndex) => {
      const row = table.rows.getItemAt(rowIndex);
      // 填充ID列
      row.cells.getItemAt(0).body.insertText(rowData[0], "End");
      // 填充图片链接列（区分表头和内容行）
      if (rowIndex === 0) {
        row.cells.getItemAt(1).body.insertText("Image URL", "End");
      } else {
        const cellBody = row.cells.getItemAt(1).body;
        // 插入指向书签的超链接，显示文本可自定义（如"查看图片"或原URL）
        cellBody.insertHyperlink("查看图片", `#${rowData[1]}`, true);
      }
      // 填充摄影师列
      row.cells.getItemAt(2).body.insertText(rowData[2], "End");
    });

    await context.sync();
  }).catch(error => {
    console.log("插入表格出错: " + error);
    if (error instanceof OfficeExtension.Error) {
      console.log("调试信息: " + JSON.stringify(error.debugInfo));
    }
  });
};

关键注意事项 #

• 书签名称必须唯一：用图片ID作为前缀（如img_123）可避免重复冲突
• 超链接格式：指向书签的链接需以#开头（如#img_123），Word会自动识别为文档内锚点
• 异步顺序：确保图片插入和书签设置完成后，再处理表格的超链接插入，避免因异步操作导致的书签未创建问题

内容的提问来源于stack exchange，提问作者mohsin pathan