Office加载项

时间  2019-11-20 标签 office 加载项

出自个人我的主页 Alvin Bloghtml

前言

前一段时间公司作了有关Excel 加载项的开发，也遇到了不少坑，因此在此记录一下，有两个缘由，1.留给之后在用到加载项的时候，复习所用，避免 跳进同一个坑里。2.留给其余作加载项的人一个参考前端

概述

此处只大概说一下，若是想了解详细的，请到office加载项官网vue

Office 开发有不少种选择git

加载项的组成部分github

  • 清单文件，mainfast.xml 该文件包含了如下内容
    • 外接程序的显示名称、说明、ID、版本和默认区域设置。
    • web项目的地址
    • 加载项的菜单样式以及布局
    • 外接程序的权限级别和数据访问要求。
  • web项目，任何web项目都可，可是必定要兼容ie11，由于office调用的是本地的ie11浏览器。

功能web

  • 经过mainfast.xml文件控制菜单，如图所示
  • web项目是经过点击菜单展现在任务栏，展现效果如图所示
  • web项目中的js文件能够控制Office，操做Office的文件，例如向Excel输入内容

开始作一个项目

跟官网开发的步骤有些不一样，可是两种方法都可vue-cli

因为我以前开发的是Excel加载项，因此接下来的例子，均是Excel加载项开发的例子，其余的加载项应该同理。跨域

第1、新建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" />
                <!-- 图标。必需大小: 1六、3二、80，可选大小: 20、2四、40、4八、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项目。如图所示框架

第2、建立web项目，其实在新建项目时，web项目已经建立好了。能够在这个项目的基础上开发jQuery项目。若是不想用这个，也须要在此框架的基础上开发其余项目。web项目和加载项项目，是两个彻底独立的项目，放在一块儿只是为了测试方便，web项目独立部署，只是若是你想要让web操做exce 的话，须要引入一些必要的文件与配置。

目前建立有四种web项目的结构。除了jQuery,其余均是目前流行的组件化开发

  • Angluar
  • Jquery
  • React
  • Vue

由于接下来要使用vue开发前端，因此删除原框架无用的东西，将整个web项目删掉。如图所示
由于我使用的是Vue，因此此处只介绍Vue搭建站点，其余三种方式去Office加载项官网

  • 使用 vue-cli脚手架搭建项目，具体步骤就不写了，文档写的很详细参考

  • 搭建好以后，运行vue项目，而后把xml文件里的~remoteurl,替换成你如今的项目地址就能够了。运行结果：
    如图所示

项目地址

项目连接

联系我们 沪ICP备13005482号-10