office js，add-in加载项，show task pane，怎么实现对选中图片添加边框？图片边框的属性是什么？

(免责声明：所提供信息已通过自动翻译工具进行转换；尽管我们力求准确，但译文可能无法完全反映原文的含义、上下文或意图)

您好，建生 陈

感谢您联系微软问答论坛。

感谢您的提问。 Word JavaScript API 中没有为 Word.InlinePicture 提供受支持的“边框”属性。在 Word 外接程序里并不存在 picture.border、picture.format.line 等属性。这些属性属于 Excel 或 PowerPoint，对 Word 来说并不适用，因此会直接抛出错误。

目前仍然可以给图片加边框，但只能通过 OOXML（DrawingML） 实现。具体做法是插入或替换图片时，在其 OOXML 定义中添加描边（a:ln）。

以下是一些可尝试的解决方法：

方案一：通过 OOXML 插入带边框的图片（推荐）

OOXML 中，图片本质是 DrawingML 对象，可以通过 a:ln 元素定义边框。

关键点：

• 边框粗细单位为 EMU
  • 1 pt ≈ 12,700 EMU
• 颜色通过 a:solidFill 设置

示例：插入一张带 2 pt 蓝色边框的图片

async function insertImageWithBorder(base64Png) {
  await Word.run(async (context) => {
    const twoPt = 2 * 12700; // 2pt 边框
    const borderColor = "0000FF"; // 蓝色
    const ooxml = `
      <w:p xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"
           xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing"
           xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
           xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
        <w:r>
          <w:drawing>
            <wp:inline>
              <a:graphic>
                <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
                  <pic:pic>
                    <pic:nvPicPr>
                      <pic:cNvPr id="0" name="BorderedImage"/>
                      <pic:cNvPicPr/>
                    </pic:nvPicPr>
                    <pic:blipFill>
                      <a:stretch>
                        <a:fillRect/>
                      </a:stretch>
                    </pic:blipFill>
                    <pic:spPr>
                      <a:ln w="${twoPt}">
                        <a:solidFill>
                          <a:srgbClr val="${borderColor}"/>
                        </a:solidFill>
                      </a:ln>
                      <a:prstGeom prst="rect">
                        <a:avLst/>
                      </a:prstGeom>
                    </pic:spPr>
                  </pic:pic>
                </a:graphicData>
              </a:graphic>
            </wp:inline>
          </w:drawing>
        </w:r>
      </w:p>`;
    context.document.body.insertOoxml(ooxml, Word.InsertLocation.end);
    await context.sync();
  });
}

方案二：给“已选择的图片”添加边框（读取并替换 OOXML）

如果图片已经在文档中：

• 选中图片
• 使用 getOoxml() 读取其 OOXML
• 在 pic:spPr 内插入或修改 <a:ln>
• 使用 insertOoxml(…, replace) 替换当前内容

这种方式适合在任务窗格中对用户选中的图片动态加边框。

可用的边框属性（DrawingML）

通过 <a:ln> 可以控制的常见边框属性包括：

• 粗细：w="EMU 值"
• 颜色：a:srgbClr val="RRGGBB"
• 虚线样式：a:prstDash
• 端点样式：a:cap（平头、圆头、方头）
• 连接方式：圆角、斜角、尖角
• 复合线条：双线、粗细线
• 对齐方式：居中、内侧、外侧

这些都属于 Word 原生支持的 DrawingML，但 不通过 Word JS API 直接暴露。

备用变通方案（不推荐但可用）

如果你不想操作 OOXML：

• 可以把图片放入 1×1 表格
• 通过设置表格单元格边框来模拟图片边框

缺点是：

• 会改变文档结构
• 不完全等同于图片“图片边框”功能

仅在受限场景下使用。

关于 Word 桌面版与网页版的差异

• Word 网页版在图片属性更新方面仍有不少限制
• 即使是宽高调整，在某些版本中也可能不生效
• OOXML 插入方式在桌面版中稳定性更高

如果你的外接程序需要同时支持桌面版和网页版，务必两端都测试。

感谢您耐心阅读，希望这些信息对您有所帮助。 

若本回答对您有帮助，请点击“接受答案”并给予好评。若对本回答有其他疑问，请点击“评论”。  

注：若需接收本讨论串的相关邮件通知，请按[我们的文档]指引启用邮件通知功能。