vue-excel-addin Git address

When the project needs time, I will try to use Vue to build an Excel Addin. Microsoft is too bad. Only the ng React jquery tutorial document will try both Chinese and English

Use Vue to build an Excel add-in

In this article, you can see how to use Vue and Excel’s JavaScript API to build an Excel Add-in

Need to be

  • Install the Vue – cli
npm install --global vue-cli
Copy the code
  • Globally install the latest version of Yeoman and Yeoman Generator for Office Add-ins.
npm install -g yo generator-office
Copy the code

Generate a new Vue project

To build scaffolding using vue-cli, run the following command on the command line: vue init webpack vue-excel-addin

Generate the manifest file and add the add-in configuration

Each add-in requires a manifest file to configure and define its functionality

  1. Enter the APP file

    cd vue-excel-addin
  2. To generate your add-in manifest file using Yeoman, run the following command

    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

The generator will ask you if you want to open resource-.html. This document doesn’t need to be opened, but if you’re curious, that’s ok! Select Yes or No and let the generator do its job.

If you are prompted to overwrite package.json, select No (do not overwrite).

  1. Follow this tutorial to run your Excel add-in
Note that change the manifest port to dev’s default 8080 and move assets to static in the root directory and modify the configuration
  • 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
  1. Edit package.json to add the — HTTPS parameter to the dev script

Update the app

  1. Open index.html and place the following<script>Label added to</head>before
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
Copy the code
  1. Will open the SRC/main. Jsnew Vue({ el: '#app', components: {App}, template: '<App/>' })Replace with the following
Office.initialize = () => {
  new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'})}Copy the code
  1. Open SRC/app.vue and change it to the following
<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>

Copy the code

Give it a try

  1. Enter the following command on the command line
Windows:

npm start

macOs:

npm start

  1. On the Start TAB in Excel, select the Show Taskpane button to open the Task Pane for the add-in

  2. Select the cells in any region

  3. Within the Task Pane, click the Set Color button to change the color of the selected area to green