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
- Enter the APP file
cd vue-excel-addin
- 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).
- 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
- Edit package.json to add the — HTTPS parameter to the dev script
Update the app
- 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
- Will open the SRC/main. Js
new Vue({ el: '#app', components: {App}, template: '<App/>' })
Replace with the following
Office.initialize = () => {
new Vue({
el: '#app',
components: {App},
template: '<App/>'})}Copy the code
- 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
- Enter the following command on the command line
Windows:
npm start
macOs:
npm start
-
On the Start TAB in Excel, select the Show Taskpane button to open the Task Pane for the add-in
-
Select the cells in any region
-
Within the Task Pane, click the Set Color button to change the color of the selected area to green