【譯】使用Vue建立一個Excel外掛

FrankCheung發表於2018-07-22

VueExcel

這篇文章也發在我的部落格，歡迎圍觀?

Translated by FrankZhang.

如有錯誤，敬請不吝告知，謝謝!

關於本文

在這篇文章中，你將會經歷一遍使用Vue和Excel JavaScript API 打造一個Excel外掛的過程。

預備知識

全域性安裝Vue CLI
```
npm install -g vue-cli

複製程式碼
```
全域性安裝最新版本的Yeoman和Yeoman generator for Office Add-ins 。
```
npm install -g yo generator-office

複製程式碼
```

建立一個新的Vue app

使用Vue CLI生成一個新的Vue app。通過命令列，執行下面的命令，並且如下所述對提示的配置進行設定即可。

vue init webpack my-add-in

複製程式碼

當對彈出的提示進行設定的時候，記得為下面三個設定非預設的配置。其他的你可以全部選擇使用預設的配置。

Install vue-router? No
Set up unit tests: No
Setup e2e tests with Nightwatch? No

生成 manifest 檔案

每個外掛都需要一個manifest檔案去定義其設定和能力。

進入你的應用的資料夾。
```
cd my-add-in

複製程式碼
```
使用Yeoman生成器為你的外掛生成manifest檔案。執行下面的命令並且如下設定彈出的提示即可。
```
yo office 

複製程式碼
```
- Choose a project type: Manifest
- What do you want to name your add-in?: My Office Add-in
- Which Office client application would you like to support?: Excel

當你完成了上述載入程式，一個manifest檔案以及資原始檔就已經可供使用了，可以用於建立你的專案。

![Yeoman generator](../images/yo-office.png)

> [!NOTE]
> If you're prompted to overwrite **package.json**, answer **No** (do not overwrite).

複製程式碼

保障你應用的安全性

雖然使用HTTPS在外掛開發中並不是強制要求的，但還是強烈建議為你的外掛使用HTTPS。不是SSL-secured（HTTPS）的外掛在使用過程中會出現內容不安全的警告和錯誤提示。如果你計劃在Office Online上使用你的外掛或者將你的外掛釋出在AppSource上，那它必須是SSL-secured。如果你的外掛可以獲取外部資料和服務，它也必須是SSL-secured，以保障傳輸過程中的資料安全。自簽名證照可以在開發和測試環境使用，只要該證照在本地機器上是被信任的即可。

為你的應用開啟HTTPS，僅需要開啟專案根目錄下的package.json，修改dev指令碼，增加--https標識，儲存檔案即可。

"dev": "webpack-dev-server --https --inline --progress --config build/webpack.dev.conf.js"

複製程式碼

更新應用

在你的編輯器中，開啟manifest檔案（就是專案根目錄下以"manifest.xml"結尾的檔案）。替換所有出現的 https://localhost:3000 為 https://localhost:8080 並儲存檔案。

開啟 index.html，在</head>標籤之前增加下面的<script>標籤。

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

複製程式碼

開啟src/main.js，_移除_下面的程式碼：

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
})

複製程式碼

然後在相同位置增加下面的程式碼。

const Office = window.Office
Office.initialize = () => {
  new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
  })
}

複製程式碼

開啟src/App.vue，用下面的程式碼替換該檔案的全部內容，並且在檔案的最後新增一個換行（例如在</style>標籤之後新增換行）並且儲存檔案。

<template>
<div>
    <div>
    <div>
        <div>
        <h1>Welcome</h1>
        </div>
    </div>
    <div>
        <div>
        <p>Choose the button below to set the color of the selected range to green.</p>
        <br />
        <h3>Try it out</h3>
        <button @click="onSetColor">Set color</button>
        </div>
    </div>
    </div>
</div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    onSetColor () {
      window.Excel.run(async (context) => {
        const range = context.workbook.getSelectedRange()
        range.format.fill.color = 'green'
        await context.sync()
      })
    }
  }
}
</script>

<style>
#content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

#content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.padding {
    padding: 15px;
}
</style>

複製程式碼

啟動開發伺服器

通過命令列，執行以下命令啟動開發伺服器。
```
npm start

複製程式碼
```
在瀏覽器中開啟 https://localhost:8080 。如果你的瀏覽器指出該頁面的證照是不被信任的，你需要設定你的電腦信任該證照。
在你的瀏覽器在沒有任何證照錯誤的情況下載入完成這個外掛頁面，你可以準備測試你的外掛了。

嘗試一下

按照各個平臺的用法說明，你將在Excel中載入和執行你的外掛。
- Windows: Sideload Office Add-ins on Windows
- Excel Online: Sideload Office Add-ins in Office Online
- iPad and Mac: Sideload Office Add-ins on iPad and Mac
在Excel中，選擇 Home 選項，然後選擇 Show Taskpane 按鈕開啟外掛任務窗格。
在工作表中選擇任意範圍的單元格。
在任務窗格，選擇 Set color 按鈕設定選中區域的顏色為綠色。