【譯】使用Vue建立一個Excel插件

時間 2019-11-16

標籤使用 vue 建立一個 excel 插件欄目 Microsoft Office 简体版

原文原文鏈接

這篇文章也發在個人博客，歡迎圍觀😄html

Translated by FrankZhang.vue

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

關於本文

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

預備知識

全局安裝Vue CLIgithub
```
npm install -g vue-cli

複製代碼
```
全局安裝最新版本的Yeoman和Yeoman generator for Office Add-ins 。web
```
npm install -g yo generator-office

複製代碼
```

建立一個新的Vue app

使用Vue CLI生成一個新的Vue app。經過命令行，執行下面的命令，而且以下所述對提示的配置進行設置便可。vue-router

vue init webpack my-add-in

複製代碼

當對彈出的提示進行設置的時候，記得爲下面三個設置非默認的配置。其餘的你能夠所有選擇使用默認的配置。vue-cli

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

生成 manifest 文件

每一個插件都須要一個manifest文件去定義其設置和能力。npm

進入你的應用的文件夾。json
```
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 按鈕設置選中區域的顏色爲綠色。