出自我的个人主页 Alvin Blog
前言
前一段时间公司做了有关Excel 加载项的开发，也遇到了很多坑，所以在此记录一下，有两个原因，1.留给以后在用到加载项的时候，复习所用，避免 跳进同一个坑里。2.留给其他做加载项的人一个参考
概述
此处只大概说一下，如果想了解详细的，请到office加载项官网
Office 开发有很多种选择
加载项的组成部分
- 清单文件，mainfast.xml 该文件包含了以下内容
- 外接程序的显示名称、说明、ID、版本和默认区域设置。
- web项目的地址
- 加载项的菜单样式以及布局
- 外接程序的权限级别和数据访问要求。
- web项目，任何web项目均可，但是一定要兼容ie11，因为office调用的是本地的ie11浏览器。
功能
- 通过mainfast.xml文件控制菜单，
- web项目是通过点击菜单展示在任务栏，展示效果
- web项目中的js文件可以控制Office，操作Office的文件，例如向Excel输入内容
开始做一个项目
跟官网开发的步骤有些不同，但是两种方法均可
由于我之前开发的是Excel加载项，所以接下来的例子，均是Excel加载项开发的例子，其他的加载项应该同理。
第一、新建Excel 外接程序，使用的开发工具是vs2017。
新建项目的过程中，你会发现它有两个选项，默认选择第一个，第二个是更丰富的外接程序，可以实现更多Excel的自定义行为。
项目建好之后，项目中的xml文件已经在里面了，项目新建之后会出现默认的节点，并且已经给出了注释，注释非常详细。此处指介绍一些重要的节点，如果感兴趣到此处去了解
- ID： 此处创建GUID可以去线上生成，vs2017也自带创建guid。工具->创建GUID
<!-- 重要事项！ID 对于外接程序必须是唯一的，如果重复使用该清单，请确保将此 ID 改为新的 GUID。 -->
<Id>2a18a912-de33-4f62-92f7-ce7c2899ea77</Id>
- AppDomains:由于浏览器是不允许跨域访问的，你必须要把你web的域名放在此处，才可以使用，如果你想使用多个web项目，那就都在此处列出域名，比如我测试的地址是localhost:8081
<!-- 导航时允许使用的域。例如，如果使用 ShowTaskpane，然后得到一个 href 链接，则只有在此列表上存在该域时，才允许导航。 -->
<AppDomains>
<AppDomain>localhost:8081</AppDomain>
<AppDomain>gooogle.com</AppDomain>
<AppDomain>mywebsite.com</AppDomain>
</AppDomains>
- 默认访问的首页,此处的~remoteAppUrl即是你的url，在测试时会自动替换成你的web服务地址，在上线发布时，需要手动替换
<DefaultSettings>
<SourceLocation DefaultValue="localhost:8081" />
</DefaultSettings>
- Host：此节点下的子节点即是你展示在Excel顶部的菜单栏，使用节点来控制显示
- Resources：此节点存放所有的资源，比如菜单名称、要访问的url、图片的地址
- web项目开始后执行的
<GetStarted>
<!-- “入门”标注的标题。resid 属性指向 ShortString 资源 -->
<Title resid="Contoso.GetStarted.Title"/>
<!-- 入门标注的描述。ResID 指向 LongString 资源 -->
<Description resid="Contoso.GetStarted.Description"/>
<!-- 指向详细说明外接程序使用方法的 URL 资源。 -->
<LearnMoreUrl resid="Contoso.GetStarted.LearnMoreUrl"/>
</GetStarted>
- FunctionFile:如果想在菜单栏里操作Excel文件，比如要写东西，必须要在此处增加那个包含js的html文件
<!-- 函数文件是包含 JavaScript 的 HTML 页面，将在此页面中调用用于 ExecuteAction 的函数。 将 FunctionFile 视为代码隐藏 ExecuteFunction。 -->
<FunctionFile resid="Contoso.DesktopFunctionFile.Url" />
- 菜单区域：分为组、一级菜单、二级菜单。只能到二级菜单。
<!-- PrimaryCommandSurface 为 Office 主功能区。 -->
<ExtensionPoint xsi:type="PrimaryCommandSurface">
<!-- 使用 OfficeTab 来扩展现有选项卡。使用 CustomTab 来创建新选项卡。 -->
<OfficeTab id="TabHome">
<!-- 确保为组提供唯一 ID。建议 ID 为使用公司名的命名空间。 -->
<Group id="Contoso.Group1">
<!-- 为组指定标签。resid 必须指向 ShortString 资源。 -->
<Label resid="Contoso.Group1Label" />
<!-- 图标。必需大小: 16、32、80，可选大小: 20、24、40、48、64。强烈建议为大 UX 提供所有大小。 -->
<!-- 使用 PNG 图标。资源部分中的所有 URL 必须使用 HTTPS。 -->
<Icon>
<bt:Image size="16" resid="Contoso.tpicon_16x16" />
<bt:Image size="32" resid="Contoso.tpicon_32x32" />
<bt:Image size="80" resid="Contoso.tpicon_80x80" />
</Icon>
<!-- 控件。可以为“按钮”类型或“菜单”类型。 -->
<Control xsi:type="Button" id="Contoso.TaskpaneButton">
<Label resid="Contoso.TaskpaneButton.Label" />
<Supertip>
<!-- 工具提示标题。resid 必须指向 ShortString 资源。 -->
<Title resid="Contoso.TaskpaneButton.Label" />
<!-- 工具提示标题。resid 必须指向 LongString 资源。 -->
<Description resid="Contoso.TaskpaneButton.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Contoso.tpicon_16x16" />
<bt:Image size="32" resid="Contoso.tpicon_32x32" />
<bt:Image size="80" resid="Contoso.tpicon_80x80" />
</Icon>
<!-- 这是触发命令时的操作(例如单击功能区)。支持的操作为 ExecuteFunction 或 ShowTaskpane。 -->
<Action xsi:type="ShowTaskpane">
<TaskpaneId>ButtonId1</TaskpaneId>
<!-- 提供将显示在任务窗格上的位置的 URL 资源 ID。 -->
<SourceLocation resid="Contoso.Taskpane.Url" />
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
配置好自己的东西之后，F5运行，Excel便会出现初始化好的项目，其中excel单元格里的内容是js写入的，具体如何写入，下文分解。右边侧栏则是需要开发的web项目。
第二、创建web项目，其实在新建项目时，web项目已经创建好了。可以在这个项目的基础上开发jQuery项目。如果不想用这个，也需要在此框架的基础上开发其他项目。web项目和加载项项目，是两个完全独立的项目，放在一起只是为了测试方便，web项目独立部署，只是如果你想要让web操作exce 的话，需要引入一些必要的文件与配置。
目前创建有四种web项目的结构。除了jQuery,其他均是目前流行的组件化开发
- Angluar
- Jquery
- React
- Vue
因为接下来要使用vue开发前端，所以删除原框架无用的东西，将整个web项目删掉。
因为我使用的是Vue，所以此处只介绍Vue搭建站点，其他三种方式去Office加载项官网
-
使用 vue-cli脚手架搭建项目，具体步骤就不写了，文档写的很详细参考
-
搭建好之后，运行vue项目，然后把xml文件里的~remoteurl,替换成你现在的项目地址就可以了。运行结果：
