Word加载项技术问询：点击缩略图无法导航至对应图片

问题背景 #

开发Word加载项时，已实现从服务插入内容、在任务窗格展示插入图片缩略图的功能，但点击缩略图调用select()方法无法让Word滚动到对应图片位置。现有代码在构建图片列表时追踪了InlinePicture对象，点击时直接复用该对象执行选择操作，但无任何反应，推测是跨Word.run上下文使用对象导致的问题。

问题原因 #

通过track()追踪的InlinePicture对象是绑定到创建它的Word.run上下文的，每个Word.run都是独立的请求上下文，跨上下文复用已追踪的对象会导致操作失效——新上下文无法识别旧上下文的对象引用。

解决方案 #

不要保存InlinePicture对象本身，而是保存图片的唯一标识id（文档内持久且唯一），点击时通过id在新的Word.run上下文重新获取图片对象，再执行定位操作：

1. 修改图片列表构建代码 #

替换保存追踪对象的逻辑，改为保存图片ID：

const base64Image = image.getBase64ImageSrc();
const imageId = image.id; // 获取图片的唯一ID
await context.sync();
diagramList.push({ imageId, base64Image: base64Image.value, tag });

2. 修改点击缩略图的定位代码 #

通过ID重新获取图片，再执行选择和滚动操作：

await Word.run(async (context) => {
  // 通过ID获取目标图片
  const targetImage = context.document.inlinePictures.getItem(diagram.imageId);
  const imageRange = targetImage.getRange();
  
  // 选中图片并滚动到视图中
  imageRange.select();
  imageRange.scrollIntoView(); // 确保图片滚动到可见区域
  
  await context.sync();
});

补充说明 #

• 使用scrollIntoView()比单纯调用select()更可靠，它能确保目标图片滚动到当前视图范围内，而select()仅完成选中操作，若图片不在当前视图可能不会触发滚动。
• 图片的id在文档生命周期内保持唯一，即使文档保存后重新打开，ID依然有效，适合作为跨上下文的标识。

内容的提问来源于stack exchange，提问作者Justin Greywolf