Office加載項

出自個人我的主頁 Alvin Blog

前言

前一段時間公司作了有關Excel 加載項的開發，也遇到了不少坑，因此在此記錄一下，有兩個緣由，1.留給之後在用到加載項的時候，複習所用，避免 跳進同一個坑裏。2.留給其餘作加載項的人一個參考

概述

此處只大概說一下，若是想了解詳細的，請到office加載項官網

Office 開發有不少種選擇

• VBA 參考淺談Excel開發
• Shared Addin 參考淺談Excel開發
• VSTO 參考VSTO官方文檔
• Office web加載項

加載項的組成部分

• 清單文件，mainfast.xml 該文件包含了如下內容
  • 外接程序的顯示名稱、說明、ID、版本和默認區域設置。
  • web項目的地址
  • 加載項的菜單樣式以及佈局
  • 外接程序的權限級別和數據訪問要求。
• web項目，任何web項目都可，可是必定要兼容ie11，由於office調用的是本地的ie11瀏覽器。

功能

• 經過mainfast.xml文件控制菜單，
• web項目是經過點擊菜單展現在任務欄，展現效果
• web項目中的js文件能夠控制Office，操做Office的文件，例如向Excel輸入內容

開始作一個項目

跟官網開發的步驟有些不一樣，可是兩種方法都可

因爲我以前開發的是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,替換成你如今的項目地址就能夠了。運行結果：
  

項目地址

項目連接