vue-excel-addin git地址

項目需求 有空就嘗試使用vue去構(gòu)建一個excel addin
微軟太坑爹了,只給了ng react jquery的教程
文檔會嘗試中英文雙語的

使用Vue來構(gòu)建一個Excel add-in

在這篇文章，你可以看到是如何使用Vue和Excel的JavaScript API來構(gòu)建一個Excel add-in的

需要

• 安裝Vue-cli

npm install --global vue-cli

• 全局安裝最新版本的Yeoman和Yeoman generator for Office Add-ins。

npm install -g yo generator-office

生成新的Vue項目

使用vue-cli來搭建腳手架,在命令行輸入如下命令:
vue init webpack vue-excel-addin

生成manifest文件和加入add-in配置

每個add-in都需要一個manifest文件來配置和定義它的功能

1. 進(jìn)入app文件
   cd vue-excel-addin
2. 使用Yeoman來生成你的add-in的manifest文件, 運行如下命令
   yo office

• Would you like to create a new subfolder for your project?: No
• What do you want to name your add-in?: My Office Add-in
• Which Office client application would you like to support?: Excel
• Would you like to create a new add-in?: No

生成工具會問你是否需要打開 resource.html.這篇文檔無需打開, 當(dāng)然如果你好奇的話,打開也沒關(guān)系! 選擇 yes 或者 no 讓生成工具完成它的工作把！

jpg

如果你被提示要覆蓋 package.json, 選擇 No (do not overwrite).

3. 跟著以下的教程來運行你的excel add-in吧

注意,請把manifest的相關(guān)端口修改為dev默認(rèn)的8080以及將根目錄的assets移入static并修改相關(guān)配置

• 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

4. 編輯package.json 給dev腳本添加--https參數(shù)

更新app

1. 打開index.html, 把以下的<script>標(biāo)簽添加到</head>之前

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

2. 打開src/main.js 將new Vue({ el: '#app', components: {App}, template: '<App/>' })替換成以下

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

3. 打開 src/App.vue, 修改為如下

<template>
  <div id="app">
    <div id="content">
      <div id="content-header">
        <div class="padding">
          <h1>Hello world!</h1>
        </div>
      </div>
      <div id="content-main">
        <div class="padding">
          <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>

試一下吧

1. 在命令行輸入以下命令

Windows:

npm start

macOs:

npm start

2. 在Excel中的開始tab, 選擇Show Taskpane按鈕來打開add-in的task pane
   

   d

3. 選擇任意一個區(qū)域的單元格

4. 在task pane內(nèi), 點擊 Set color按鈕來將選中區(qū)域的顏色轉(zhuǎn)為綠色

[圖片上傳失敗...(image-a3007-1517033146505)]