Excel JavaScript API初尝试

---

近期参加了学校的一个小项目，需要用到Excel的自动化操作。当然，VBA和宏录制功能已经非常成熟了，只是最近在学习JavaScript和一些前端的开发，所以浏览微软的文档发现了这个Office JS API。但是国内几乎搜索不到它的用法，再加上微软的那机器翻译的中文文档简直惨不忍睹，只好跟着英文文档一起摸索了。

当然，大佬请出门左转去官方文档。

---

前言

Excel有多种不同的加载项，包括COM加载项、VSTO加载项和Web加载项。当然，要使用JS来操作文档当然是要用Web加载项了。

如果你是从VBA转用JS API，并且没有Web开发经验，请先学习HTML + CSS + JavaScript Web开发三件套再尝试使用JS API。

使用JS来操作Office文档当然有很多好处，JS的弱类型语言能使我们无需太多关注语法快速地实现想要的功能，并且加载项可以跨平台——Windows桌面、Office Online、iPad和Mac（只能将加载项发布到AppSource使用）。但是，Office Web加载项也是一个网页，同样需要服务器来托管页面内容。所以想要成功运行加载项或者分享给他人你的加载项，你还需要一个Web服务器。

如果你不能维护一个服务器的运行，那么你可能不适合使用Office Web加载项。

但是总会有解决办法，例如可以采用在GitHub、Gitee等代码托管平台创建页面来访问，毕竟加载项也仅仅是一个Web页面。（暂未尝试，仅凭空想）

注：此文章中的“终端”是指命令提示符或PowerShell，Visual Studio Code中的PowerShell也是一个终端。

创建第一个Excel Web加载项

Yeoman生成器

Yeoman生成器实质上是一个npm软件包，用来通过模板创建项目。运行它的命令为：yo，非常简单。你也可以提交自己的模板到Yeoman生成器官网。

生成项目方法比较

不推荐使用Visual Studio创建Web加载项项目，因为根据微软的官方文档，使用Yeoman 生成器开发Web加载项有如下好处：

• 与 Visual Studio 相比，Yeoman 生成器可为 Office 加载项项目提供更广泛的项目类型、框架和语言选项。
• Yeoman 生成器中的项目模板的更新频率高于 Visual Studio 中的项目模板。

对我个人来说。Visual Studio占用空间更大，运行更慢，我的轻薄本吃不消。

当然，使用Visual Studio开发加载项具有省时省力的特点，如果你喜欢使用Visual Studio开发，可以参阅官方文档来创建加载项。

生成Web加载项的必要条件

• Visual Studio Code 或其他Web项目开发工具
• Node.js 官网传送门
  • 当然，安装Node.js时要记得讲包含软件包的目录添加到Path中，以便运行npm。
  • 要检测是否成功添加到Path中，请在任意位置打开终端，执行以下命令：npm -v
  • 如果成功，则会输出npm的版本信息。
• Yeoman 和适用于 Office 外接程序的 Yeoman 生成器
  • 在终端运行以下命令来安装：
  • npm install -g yo generator-office

至此，准备工作已完成。

使用Yeoman生成器生成项目

在终端中找到想要创建项目的文件夹，运行以下命令：

yo office

请注意： Yeoman生成器会在当前文件夹中 新建一个 以项目名称命名的文件夹来存储项目文件，所以无需创建项目文件夹。

通过上下键选择：

• Choose a project type: Office Add-in Task Pane project
• Choose a script type: Javascript
• What do you want to name your add-in? 输入你的项目名称
• Which Office client application would you like to support? Excel

然后项目就创建好啦！cd到刚刚创建的文件夹，执行code .就可以在Visual Studio Code中打开文件夹进行编辑了。

当然，要想充分利用Visual Studio Code，离不开插件。打开文件夹时VS Code会在右下角推荐插件。VS Code也有中文插件包，可以到插件面板搜索Chinese。

使用Yeoman生成器创建好的项目目录详解

创建好的目录在VS Code中大概是这个模样

从头往下说

1. .vscode文件夹中包含了VS Code的启动调试和生成参数，一般无需调整。功能作用大概就是点击Code中的启动调试就自动运行了npm start的命令。
2. assets文件夹中包含了加载项的一些静态资源，这里目前有默认的Logo。Logo有四种不同的大小，可以自行替换。
3. dist文件夹包含了build的结果。刚生成的项目可能没有这个文件夹。运行npm run build就可以编译项目。详见发布项目。
4. node_modules文件夹中包含了很多npm模块，是在创建项目是自动执行的npm install的结果。后续根据开发需要你也可以安装更多的npm模块。
5. src文件夹包含了项目的页面资源文件，也就是html，css和js文件。在Excel的任务窗格中默认打开的就是./src/taskpane/taskpane.html页面。当然，实际的访问路径并不是这样的冗长，而仅仅是服务器上的./taskpane.html页面。这是由于node.js中的webpack dev server将你的项目文件拷贝到Web Server的根目录下，来模拟正式编译后的效果。因此，如果你想添加新的页面，也请将页面信息写入webpack.config.js中。详细内容请查看新页面添加。
6. manifest.xml文件就是微软官方文档中所说的清单文件。这个文件不必发布到托管服务器，因为它是Office 客户端使用的加载项引导文件。它决定了你的Office App出现的位置（菜单或是工具栏），标题、简介和 Logo，最重要的是，它还决定了Office去哪里访问你的加载项。对清单文件的编辑详细请转到发布项目。针对不同的场景，例如开发、测试和发布，需要不同的清单文件。因此需要同时维护多个清单文件。
7. package.json描述了项目信息。
8. webpack.config.js指导了webpack dev server如何使用编译项目文件。也可以在其中改变项目调试的端口号，但同时请改变清单文件中的访问地址。（默认为3000）

启动调试

在项目文件夹下打开终端，运行npm start即可在本地Excel启动调试，同时webpack dev server也会运行。运行npm run stop可以结束调试。结束调试后可能需要等待一段时间才能重新启动Web Server，否则会一直占用端口号。

要使用控制台来调试程序，运行%SystemRoot%\SysWOW64\F12\IEChooser.exe查看是否有你的项目。若没有，请到应用商店安装Microsoft Edge DevTools.

---

有空继续更新