实战Excel Add-in的三种玩法

60 阅读 0 评论 40 点赞

我是靠谱客的博主欢喜彩虹，最近开发中收集的这篇文章主要介绍实战Excel Add-in的三种玩法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言
　　
　　这个系列文章应该有一阵子没有更新了，原因是一如既往的多，但是根本所在是我对于某些章节其实还没有完全想好怎么写，尤其是对于Office Add-in这块 —— 到底是要每个都去单独写一遍，还是有其他什么好的写法会对读者更有帮助？正如我在这篇文章分享的一些关于写作的个人经验那样，我为此颇费了一些心思琢磨，直到最近才做出了一个选择：我将不拘泥于每个应用都写一次，而是尝试总结一些共性的操作指南。本文将是一个尝试，以我对于Office Add-in开发的了解，Excel所占的比重相对较高（根据不完全统计，在应用商店所有Office Add-in中，Excel占到40%左右），所以我希望用本文的Excel Add-in的实际案例，给广大的Office Add-in开发人员直观地了解三种不同的开发技术是如何过渡和共存的，以帮助大家做出自己的选择。
　　
　　本文所提到的三种玩法，是指最早的VBA技术，后来的VSTO技术，以及现在更推荐的Web Add-in的技术。如果大家对于这些基本概念以及Office 365的开发还不太熟悉，欢迎阅读我此前写好的 Office 365开发概述和生态环境介绍：上篇，下篇
　　
　　案例介绍
　　
　　我一向鼓励在实践中学习。为了演示如何自定义开发，并且比对不同的技术下面实现方式的差异，本文将以下面的一个需求作为案例展开。假设我们需要为Excel增加一项功能，用户点击一个菜单或者按钮后，可以动态生成一些统计数据，并且根据这些数据生成一个柱状图。
　　
　　VBA —— 一曲肝肠断，天涯何处觅知音
　　
　　VBA 是我们最早的一个用来扩展Office 应用程序的技术，由于其简单易用且功能强大，在全世界范围内拥有数以亿计的用户。实现上面提到的这样的需求，其实是VBA很擅长的，尤其是数据如果本身就来自于Excel内部的话。
　　
　　学习VBA的一个最好起点就是用录制宏。以本案例而言，即便你是VBA的新手，也可以尝试一步一步地输入数据并且生成图表，然后将生成的代码稍作整理和修改后，可能就是下面这样子的。
　　
　　完整代码可以通过 https://gist.github.com/chenxizhang/3bc5e940f59f9e30d13cb88e3a6c8a6a 获取，请在Excel的VBA编辑器中，新建一个模块，然后将这个代码复制进去，最后按下F5运行即可看到效果。
　　
　　VSTO —— 出道即巅峰，从未被超越
　　
　　VSTO是2005年正式引入的，它带来的好处是可以基于功能强大且已经被证明成功的Microsoft .NET平台进行编程，这意味着你可以使用宇宙最强的Visual Studio进行快速开发，同时使用 .NET Framework 的全部功能，可以访问到任何你想要的资源。VSTO的开发语言有VB.NET和C#两种。
　　
　　我个人目前用的最多的是C#，以我自己的亲身体会来看，从VBA转到VSTO，短期来说，使用VB.NET可能是最简单的，因为语法绝大部分都是一致的。但长期来看，我还是建议大家学习一下C#这门专门为.NET设计的语言。
　　
　　Visual Studio 的项目模板非常强大，它会自动生成很多的代码。对于一个VSTO的Add-in来说，我们最常见的做法会为它创建对应的Ribbon工具栏，当用户单击了某个按钮后，再根据当前的上下文进行相关的代码处理。
　　
　　你可以在Ribbon 的设计器中，添加一个按钮，然后将下面的代码复制到按钮的单击事件中,然后按下F5即可进行调试。
　　
　　完整代码可以通过https://gist.github.com/chenxizhang/c249740f63edf8c29d18700fb357474d 或者 https://gist.github.com/chenxizhang/e75b849b1d2ef6eab5d742a9c976527d 获取，前者是VB.NET代码，后者是C#代码。
　　
　　Web Add-in —— 向云而生，机遇和挑战共存
　　
　　Web Add-in是从Office 2013开始支持的新的开发模式，它具有划时代的意义，主要在于利用业界标准的Web开发技术来做Add-in开发，同时具有跨平台和设备的先天优势，集中化部署也降低了运维的复杂性。
　　
　　不同于VBA到VSTO的平滑过渡，这个新技术对于传统的VBA和VSTO的开发者来说，最大的挑战在于要学习全新的Web开发的技术。Web Add-in包含但不仅限于下面这些主流技术，请大家有一定的心理准备。
　　
　　HTML
　　
　　CSS
　　
　　Javacript
　　
　　Typescript (可选)
　　
　　NodeJS （可选）
　　
　　前面三个是基础，如果有兴趣学习，我推荐一个不错的网站 http://w3school.com.cn/。
　　
　　后面两个是高级部分，但很可能会成为以后的主流。有兴趣可以通过他们的官方网站进行学习。
　　
　　我的范例是使用NodeJS来实现的，所以如果要运行范例，则需要先安装好NodeJS的运行环境，请参考 https://nodejs.org/en/ .
　　
　　在开发工具这个方面，Visual Studio仍然提供了非常好用的模板，但Visual Studio Code可能是一个更好的选择，尤其是你准备学习和使用基于NodeJS来开发Office Add-in的话。
　　
　　一下子讲了这么多，是不是已经有点头大了？一个好消息是，我们现在有一个有意思的小插件—— Script lab —— 可以在不离开Excel界面的情况下，快速开始学习Web Add-in的开发。这个插件本身就是一个非常典型的Add-in的范例，是由微软内部开发的，它提供了很多样例代码，可以帮助开发者熟悉全新的基于javascript的对象模型。
　　
　　只要你拥有Office 365的账号，你就可以免费使用这个插件。具体的操作方式是在顶部的Ribbon工具栏中，找到“Insert”这个选项卡，然后单击里面的“Store”这个按钮，搜索Script lab即可进行安装。
　　
　　安装成功后，顶部的Ribbon工具栏会多出来一个选项卡“Script Lab”，点击“Code”按钮，然后找到Report generation 这个Sample，如下图所示
　　
　　你现在无需做任何代码的修改，直接Run就可以看到上图的效果了。
　　
　　请注意，官方提供的这个Report Generation的Sample其实有一个小的代码问题，它在设置图表的数据源时没有把标题行包括进去，我已经修改了这个Sample，有需要可以通过 https://gist.github.com/chenxizhang/cebfde8cf08c55d54d5cdb336b166cee 查看，并且导入到你的Sample库中去。
　　
　　关于在Visual Studio Code中如何开发和测试Office Add-in，微软官方也有一篇文章可以参考：https://code.visualstudio.com/docs/other/office 。我这里要告诉大家的好消息是，你用Script lab运行成功的代码，几乎可以原封不动地复制粘贴到Visual Studio Code中去，做成一个真正的Add-in，并且通过你的渠道分发出去。（这些内容我后续还会专门的文章展开讲解）。
　　
　　结语
　　
　　虽然我做这方面研究已经有相当长时间了，但真正这三个技术放一起对比讨论，却是直到昨天我在与大中华区两个影响力最大的Office中文技术社区（ExcelHome和ExcelPX）的专家朋友们聚会讨论时才首次展示。我用这个作为例子的主要目的，是希望让大家看到技术的发展路线，理解为什么要这么变化，同时并且通过实例让大家更加有信心，虽然学习新东西会遇到一些挑战的，但大家也能清楚地看到，代码的结构、逻辑其实是相通的。说到底，这也是一个程序员的基本素养 —— 我们从来不会停止探索，而因为我们有编程的思维，所以我们毫无畏惧。
　　
　　（3）last()函数，定位 Audi 写成 //input@name=’identity’，可以看到 Audi 这个元素本身就处于 input 最后一个了，此时可以使用 last() 函数进行匹配：//input[@name=”identity”][last()]。
　　
　　（4）starts-with：以 starts-with 为开头写法实例：//input[starts-with(@id,’user’)]代表 input 下 id 以 user 为开头的元素。
　　
　　（5）not()：表示否定，一般情况下会与返回值为 true 或者 false 的函数组合起来使用。比如上面提到的 contains() 与 starts-with。
　　
　　用实例来说：现在想要定位到不是 Audi 车除外的三种车元素，此时写法为：//input[@name=”identity” and not (contains(@class,’A’))]。
　　
　　当然 not() 还有一种特殊用法就是直接 Not。//input[not(@class)] 表示匹配出 input 下所有不含 class 属性的元素。
　　
　　总结：唯一需要注意的是所有函数的写法 function(@属性,’内容’)。
　　
　　Xpath 轴定位说明
　　
　　（1）基本轴
　　
　　轴可以在位置路径中快捷引用特定的节点（忽略属性和名称空间节点）。child 例子：
　　
　　"child::*"
　　
　　当前节点的子节点。
　　
　　"child::childnodename"
　　
　　当前节点名为childnodename的子节点。
　　
　　"child::text()"
　　
　　当前节点文本子节点。
　　
　　"child::node()"
　　
　　当前节点的子节点。
　　
　　"child::*/www.huachenguoj.com child::nodename"
　　
　　取当前节点的子节点的名为nodename的子节点。
　　
　　（2）特殊轴
　　
　　self 当前节点
　　
　　descendant 当前节点的后代（子节点或子节点的子节点…）
　　
　　parent 当前节点的父节点
　　
　　ancestor 当前节点的祖先节点（父节点和父节点的父节点…）
　　
　　preceding 按文档顺序位于当前节点之前的非祖先节点
　　
　　attribute 当前节点的属性
　　
　　namespace 当前节点的名称空间
　　
　　preceding-sibling 当前节点之前的所有兄弟节点
　　
　　following 当前节点之后的所有节点
　　
　　following-sibling 当前节点之后的所有兄弟节点
　　
　　descendant-or-self 当前节点和后代节点
　　
　　ancestor-or-self 当前节点和祖先节点
　　
　　以上的两种轴类型，没什么好说的，先记住吧。具体怎么用请看下面实例。
　　
　　第一个实例：继续定位上述中的 Volvo，使用 xpath 轴书写如下：www.mianyangbaoji.cn//div[@id=”radio”]/descendant::input1 也可以定位到。
　　
　　第二个实例：定义 Audi 上的所有节点，使用 xpath 轴写法如下：www.dfgjyl.cn/ //input[@name=”identity” and @class=”Audi”]/preceding-sibling::*
　　
　　（3）需要注意的几个问题。
　　
　　[] 后面需要跟 /，/ 后面在加上关键字。
　　
　　轴关键字后面必须使用 ::，这个后面可以接节点名称，如 input、div 等。如果后面跟的是 *，代表全部。
　　
　　轴后面接节点名称是节点前面的定位方式全部可以继续适用。
　　
　　对于轴的使用建议是能不用就不用，条条大路通罗马，没必要非使用轴进行定位。
　　
　　cssSelector 定位
　　
　　了解即可，能用 xpath 就不用 cssSelector。原因很简单，HTML 的代码我们更熟悉。
　　
　　CSS 常用符号说明
　　
　　#表示 id
　　
　　.表示class
　　
　　: 表示子元素，层级
　　
　　值得注意的是：一个空格也表示子元素，但是所有的后代子元素，就相当于 xpath 中的相对路径。
　　
　　想知道所有的 CSS 属性建议搜索其他资料学习下。
　　
　　最后请记住定位没有最好，只有是否合适。选择最合适的定位方法，就能使得定位变得得心应手。