出自我的個人主頁 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,替換成你現在的項目地址就可以了。運行結果：
