如何通过JavaScript在Excel中创建自定义选项卡？

以下是通过Office.js在Excel里创建自定义选项卡的具体实现代码，会生成名为「Contoso Data」的自定义选项卡，包含带按钮的「Insertion」功能组，最终通过Office.ribbon.requestCreateControls方法完成控件创建：

Office.onReady(async() => {
  // Office.js已准备就绪，可以调用相关API
  const contextualTabJSON = `{
    "actions": [
      {
        "id": "executeWriteData",
        "type": "ExecuteFunction",
        "functionName": "writeData"
      }
    ],
    "tabs": [
      {
        "id": "CtxTab1",
        "label": "Contoso Data",
        "groups": [
          {
            "id": "CustomGroup111",
            "label": "Insertion",
            "icon": [
              {
                  "size": 32,
                  "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/Group32x32.png"
              },
              {
                  "size": 80,
                  "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/Group80x80.png"
              }
            ],
            "controls": [
              {
                  "type": "Button",
                  "id": "CtxBt112",
                  "actionId": "executeWriteData",
                  "enabled": false,
                  "label": "Write Data",
                  "superTip": {
                      "title": "Data Insertion",
                      "description": "Use this button to insert data into the document."
                  },
                  "icon": [
                      {
                          "size": 32,
                          "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton32x32.png"
                      },
                      {
                          "size": 80,
                          "sourceLocation": "https://cdn.contoso.com/addins/datainsertion/Images/WriteDataButton80x80.png"
                      }
                  ]
              }
            ]
          }
        ]
      }
    ]
  }`; // 定义自定义控件的JSON配置字符串

  const contextualTab = JSON.parse(contextualTabJSON);
  await Office.ribbon.requestCreateControls(contextualTab);
});

关键说明： #

• actions节点：定义按钮触发的动作，这里指定点击按钮时执行名为writeData的函数
• tabs节点：配置自定义选项卡的核心信息：
  • 选项卡标签为「Contoso Data」
  • 包含一个名为「Insertion」的功能组，配置了不同尺寸的图标
  • 功能组内的「Write Data」按钮初始状态为禁用，配置了提示信息和对应图标
• 最后通过JSON.parse解析配置字符串，调用requestCreateControls方法完成控件创建

内容的提问来源于stack exchange，提问作者Vikash Choudhary