如何将Yeoman+Angular开发的Word任务窗格Office Add-in扩展支持Excel？

你完全不需要重新搭建项目，只需通过修改manifest配置+适配代码逻辑两个核心步骤，就能让现有Angular版Word插件同时支持Excel。以下是最佳实践方案：

1. 修正Manifest的宿主配置 #

打开项目根目录下的manifest.xml，重点修改以下两处：

1.1 扩展支持的宿主集合 #

找到<Hosts>节点，添加Excel对应的宿主名称Workbook（Word的宿主是Document）：

<Hosts>
  <Host Name="Document"/> <!-- Word宿主 -->
  <Host Name="Workbook"/> <!-- Excel宿主 -->
</Hosts>

1.2 确保API要求兼容双宿主 #

检查<Requirements>节点，避免只依赖Word专属的API集（比如WordApi），改用通用API集或同时声明双宿主兼容的版本：

<Requirements>
  <Sets DefaultMinVersion="1.1">
    <Set Name="SharedRuntime" MinVersion="1.1"/> <!-- 通用共享运行时 -->
    <Set Name="WordApi" MinVersion="1.3"/> <!-- 若需Word专属功能 -->
    <Set Name="ExcelApi" MinVersion="1.3"/> <!-- 若需Excel专属功能 -->
  </Sets>
</Requirements>

如果你的功能不需要宿主专属API，只保留SharedRuntime即可，这样能最大化兼容性。

1.3 验证任务窗格扩展点 #

确保<DesktopFormFactor>下的<ExtensionPoint>能适配双宿主，无需重复定义扩展点，只需让它关联已添加的宿主即可：

<DesktopFormFactor>
  <ExtensionPoint xsi:type="PrimaryCommandSurface">
    <!-- 现有按钮配置无需修改，会自动在双宿主中显示 -->
  </ExtensionPoint>
  <ExtensionPoint xsi:type="TaskPane">
    <OfficeApp>
      <Id>你的插件ID</Id>
      <DefaultSettings>
        <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
      </DefaultSettings>
      <!-- 无需额外指定宿主，会继承<Hosts>的配置 -->
    </OfficeApp>
  </ExtensionPoint>
</DesktopFormFactor>

2. 代码层面适配双宿主逻辑 #

因为Word和Excel的Office JS API完全不同，你需要在Angular组件中运行时判断当前宿主，然后执行对应逻辑：

2.1 宿主判断与分支执行 #

在你的任务窗格组件（比如taskpane.component.ts）中，添加宿主判断逻辑：

import { Component } from '@angular/core';
import * as Office from 'office-js';

@Component({
  selector: 'app-taskpane',
  templateUrl: './taskpane.component.html',
  styleUrls: ['./taskpane.component.css']
})
export class TaskpaneComponent {
  async executeAction() {
    try {
      const host = Office.context.host;
      
      if (host === Office.HostType.Word) {
        // Word专属逻辑：比如插入段落
        await Word.run(async (context) => {
          const body = context.document.body;
          body.insertParagraph('操作成功（Word）', Word.InsertLocation.end);
          await context.sync();
        });
      } else if (host === Office.HostType.Excel) {
        // Excel专属逻辑：比如写入单元格
        await Excel.run(async (context) => {
          const sheet = context.workbook.worksheets.getActiveWorksheet();
          sheet.getRange('A1').values = [['操作成功（Excel）']];
          await context.sync();
        });
      }
    } catch (error) {
      console.error('执行失败:', error);
    }
  }
}

2.2 封装通用逻辑（可选） #

如果有部分功能是双宿主通用的（比如读取用户输入、展示UI），可以把这部分代码抽成独立服务，避免重复编写。

2.3 避免宿主专属API的无差别调用 #

绝对不要在未判断宿主的情况下调用Word/Excel专属API（比如Word.run()或Excel.run()），否则会在另一宿主中直接抛出错误。

3. 测试验证 #

• 分别在Word和Excel中加载修改后的插件（通过上传manifest或本地调试）
• 测试核心功能是否在两个宿主中正常运行
• 检查控制台是否有报错，及时调整API调用逻辑

内容的提问来源于stack exchange，提问作者suyash muley