Yeoman 生成器创建项目

office插件开发

进行office Add-ins 插件开发通常有以下2种方法，分别是使用VSTO（Visual Studio Tools for Office）和Office Add-ins（基于Web的Add-ins）。下面将分别介绍这两种方法。

方法一：使用VSTO进行开发

VSTO是用于开发基于.NET框架的Office插件的工具。以下是使用VSTO开发office插件的步骤：

1. 安装Visual Studio： 确保你已经安装了最新版本的Visual Studio，并且在安装过程中选择了“Office/SharePoint开发”工作负载。

2. 创建VSTO项目：

3. 打开Visual Studio。

4. 创建一个新项目，选择“office VSTO Add-in”项目模板。

5. 编写插件代码： 在项目中，你会看到一个名为ThisAddIn.cs或ThisAddIn.vb的文件，这是插件的主要入口。你可以在这里编写你的插件代码。例如，以下代码演示了如何在office启动时显示一条消息：

   1 2 3 4

   private void ThisAddIn_Startup(object sender, System.EventArgs e) { System.Windows.Forms.MessageBox.Show("Hello, office Add-in!"); }

6. 调试和部署：

7. 在Visual Studio中按F5键运行和调试你的插件。
8. 要部署插件，可以使用ClickOnce或MSI安装程序来打包和分发你的插件。

方法二：使用Office Add-ins进行开发

Office Add-ins是一种基于Web技术（如HTML、CSS和JavaScript）的插件开发方式，可以跨平台运行。以下是使用Office Add-ins开发office插件的步骤：

1. 安装开发工具：
2. 安装Node.js和npm（Node.js包管理器）。

3. 安装Yoeman和Office-Addin-Generator：

   1	npm install -g yo generator-office

4. 创建Office Add-in项目：

5. 使用Yoeman生成Office Add-in项目：

   1

   yo office

6. 按照提示选择“office Add-in”，并提供项目名称等信息。

7. 编写插件代码：

8. 项目生成后，你会看到包含HTML、CSS和JavaScript文件的项目结构。你可以在这些文件中编写插件逻辑。

9. 例如，你可以在taskpane.html中添加一个按钮，并在taskpane.js中添加按钮的点击事件处理逻辑。

10. 调试和部署：

11. 在项目目录中运行以下命令启动本地开发服务器：

    1

    npm start

12. 打开office，转到“插入”选项卡，选择“我的加载项”，然后选择“本地加载项”并加载你的插件。
13. 部署时，可以将插件发布到Office Store，或者通过SharePoint和其他方式进行分发。

选择哪种方法

• VSTO：适用于需要深度集成和高级功能的插件，主要用于Windows上的Office应用。
• Office Add-ins：适用于需要跨平台支持的插件，因为它们基于Web技术，可以在Windows、Mac和Web上的Office应用中运行。

参考资料

• VSTO Documentation
• Office Add-ins Documentation

通过以上步骤和参考资料，你可以开始开发自己的office插件。根据你的需求选择适合的方法，编写和调试代码，最终部署并分发你的插件。

Yeoman生成器生成项目

Yeoman 生成器的安装依赖 Nodejs、npm 和 TypeScript 环境，开始之前可以先参考：TypeScript安装 。环境准备好以后，可以执行以下命令进行安装生成器：

1

npm install -g yo generator-office

安装完成后，使用如以下命令，这会在当前目录中的新文件夹中创建新项目：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

PS C:\Users\Administrator\test> yo office
yo : File C:\Users\Administrator\AppData\Local\fnm_multishells\14912_1716567600608\yo.ps1 cannot be loaded because running
scripts is disabled on this system. For more information, see about_Execution_Policies at
https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ yo office
+ ~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

# 上面的执行会报错是因为权限不够，可以通过 Set-ExecutionPolicy RemoteSigned 或 Set-ExecutionPolicy Unrestricted 开放权限

PS C:\Users\Administrator\test> Get-ExecutionPolicy -List

        Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser       Undefined
 LocalMachine       Undefined


PS C:\Users\Administrator\test> Set-ExecutionPolicy RemoteSigned

执行过程中会进行交互填写相关信息，如下：

1
2
3
4

 Continue
? Choose a project type: Excel Custom Functions using a Shared Runtime
? Choose a script type: TypeScript
? What do you want to name your add-in? exceltest

生成示例代码后，可以进入项目目录执行 build 测试操作：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

PS C:\Users\Administrator\test> cd .\exceltest\
PS C:\Users\Administrator\test\exceltest> npm run build

> excel-custom-functions@0.0.1 build
> webpack --mode production

assets by path assets/*.png 26.9 KiB

…………
webpack 5.91.0 compiled successfully in 16679 ms

参考链接：使用 Yeoman 生成器Create Office 外接程序项目

Debug本地调试

安装 VScode 并进入刚刚生成的项目目录，运行 code . 指令启动测试开发环境，根据提示输入后会自动打开 Excel 软件。

在 VScode 里可以看到项目生成的 src 源码里有 taskpane、Function、command 三部分，对应的 ts 文件是运行逻辑 --- 即自定义功能，而对应的 Html 文件是界面显示文件。

• taskpane: Excel 表格右边栏显示的内容，比如生成的 Demo 里有将单元格标黄的功能；
• Function：平时用的公式，如果这里定义了插入时钟、数字求和等功能。

先到这里吧，具体功能的开发可以参看下面给出的链接，这个链接里展示了下载插入图片及二维码输出等 Demo 。

参考链接： Excel Add-in Development

taskpane和command区域

在基于Web技术开发的Office Add-ins中，commands和taskpane是两种常见的功能模块，它们各自承担不同的职责。下面详细介绍这两者的功能和用途。

Commands（命令）

Commands在Office Add-ins中通常指的是自定义功能区命令。这些命令可以在Office应用的功能区（Ribbon）中添加自定义按钮、菜单和其他控件，以便用户可以方便地访问和执行插件的功能。

功能和用途：

1. 自定义功能区：
2. 通过添加自定义按钮或菜单项，可以将特定功能集成到Office应用的功能区中，提供便捷的访问入口。
3. 执行特定任务：
4. 当用户点击功能区中的自定义按钮时，可以触发特定的操作，例如插入内容、格式化文档、调用外部服务等。
5. 提升用户体验：
6. 通过自定义功能区命令，用户可以在熟悉的Office界面中使用插件功能，无需额外的界面切换。

假设我们要在PowerPoint中添加一个自定义按钮，点击该按钮时插入一张图片。以下是一个简化的配置和代码示例：

功能区命令配置（manifest.xml）：

1
2
3
4
5
6
7
8

<ExtensionPoint xsi:type="MessageReadCommandSurface">
  <OfficeTab id="TabHome">
    <Group id="MyCustomGroup" label="My Custom Group">
      <Control xsi:type="Button" id="InsertImageButton" label="Insert Image"
               icon="icon.png" onAction="insertImage" />
    </Group>
  </OfficeTab>
</ExtensionPoint>

功能实现（commands.js）：

1
2
3
4
5

Office.actions.associate("insertImage", function() {
    // 插入图片的实现代码
    console.log("Insert Image button clicked");
    // 实际插入图片的代码逻辑
});

Taskpane（任务窗格）

Taskpane是一个侧边栏，可以固定在Office应用窗口的一侧，为用户提供一个专用的交互区域。任务窗格通常用于显示更复杂的UI元素和交互逻辑，如表单、列表、仪表板等。

功能和用途

1. 复杂的用户界面：
2. 任务窗格提供了一个可以嵌入HTML、CSS和JavaScript的区域，适合展示复杂的用户界面和交互逻辑。
3. 持久的上下文信息：
4. 任务窗格在用户操作过程中可以保持打开状态，适合显示需要持续交互或状态更新的信息，如数据输入表单、报告生成器等。
5. 辅助用户操作：
6. 任务窗格可以作为主文档操作的辅助工具，例如提供实时预览、详细设置选项、数据分析结果等。

假设我们要在PowerPoint中创建一个任务窗格，用户可以从中选择插入不同的形状。以下是一个简化的实现示例：

任务窗格HTML（taskpane.html）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!DOCTYPE html>
<html>
<head>
    <title>Insert Shapes</title>
    <script src="taskpane.js"></script>
</head>
<body>
    <h3>Insert a Shape</h3>
    <button id="insertCircle">Insert Circle</button>
    <button id="insertSquare">Insert Square</button>
</body>
</html>

任务窗格脚本（taskpane.js）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

document.getElementById("insertCircle").onclick = function() {
    // 插入圆形的实现代码
    console.log("Insert Circle button clicked");
    // 实际插入圆形的代码逻辑
};

document.getElementById("insertSquare").onclick = function() {
    // 插入方形的实现代码
    console.log("Insert Square button clicked");
    // 实际插入方形的代码逻辑
};

总结

• Commands：用于在Office功能区中添加自定义按钮或菜单项，以便用户快速执行特定操作。
• Taskpane：用于提供一个固定在侧边栏的复杂交互界面，适合展示和操作复杂的数据或功能。

通过结合这两种功能模块，你可以创建功能丰富且用户友好的Office Add-ins，提升用户在Office应用中的操作体验。

捐赠本站(Donate)

如您感觉文章有用，可扫码捐赠本站！(If the article useful, you can scan the QR code to donate))