如果你赶时间，可以直接点击你感兴趣的内容

前言
创建第一个Excel Web加载项
- - Yeoman生成器
  - 生成项目方法比较
- 生成Web加载项的必要条件
- 使用Yeoman生成器生成项目
- 使用Yeoman生成器创建好的项目目录详解
- 启动调试

近期参加了学校的一个小项目，需要用到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中大概是这个模样

从头往下说

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

有空继续更新

Excel JavaScript API初尝试相关推荐

精读《Excel JS API》
Excel 现在可利用 js 根据单元格数据生成图表.表格,或通过 js 拓展自定义函数拓展内置 Excel 表达式. 我们来学习一下 Excel js API 开放是如何设计的,从中学习到一些开放 ...
SQLSERVER2012里的扩展事件初尝试（上）
SQLSERVER2012里的扩展事件初尝试(上) SQLSERVER2012里的扩展事件初尝试(下) 周未看了这两篇文章: 扩展事件在Denali CTP3里的新UI(一) 扩展事件在Denali ...
ASP.NET Google Maps Javascript API V3 实战基础篇一检测用户位置
ASP.NET Google Maps Javascript API V3 实战基础篇一检测用户位置对于一些基本的东西,google maps JavaScript api v3 文档已经讲解得足够 ...
Serverless 开发前端初尝试
Serverless 开发前端初尝试啥是云开发云开发serverless是一种模式,和传统模式的区别在于开发者不用维护服务器.服务器的日常维护, 负载均衡,扩容和减容, 运维,安全,日志等都交给了 ...
Google maps javascript api v3 叠加层（Overlays）介绍
很多人尝试google maps api的开发,通常会涉及到在Google maps上进行标注功能的开发.Helloj2ee学习一项技术通常不在看书,而是多以帮助为主.当我看完之后,我将Overlay ...
百度地图JavaScript API 学习之浏览器定位
浏览器定位示例百度地图API官方的所有demo示例--请直戳这里官方浏览器定位demo示例--请直戳这里后来发现的问题,这里记录一下: 在使用百度地图JS API时,无意中发现谷歌浏览器的浏览器 ...
腾讯地图JavaScript API GL实现文本标记的碰撞避让
以下内容转载自Crape的文章<web页面上的旋转矩形碰撞> 作者:Crape 链接:https://juejin.im/post/5eede991e51d45740950c946 来源: ...
腾讯位置服务JavaScript API GL实现文本标记的碰撞避让
以下内容转载自Crape的文章<web页面上的旋转矩形碰撞> 作者:Crape 链接:https://juejin.im/post/5eede991e51d45740950c946 来源: ...
第11篇 web3.js - Ethereum JavaScript API（eth）
本文环境: 区块链:以太坊POA联盟链: 出块节点数:3: 操作系统:windows 64: 节点版本:Geth1.9.14: node版本:v10.14.0 参考文档:https://web3js. ...

Excel JavaScript API初尝试