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中大概是这个模样
Excel Web加载项项目目录
从头往下说

  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.


有空继续更新

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值