vue-excel-addin git地点
项目需求 有空就尝试运用vue去构建一个excel addin
微软太坑爹了,只给了ng react jquery的教程
文档会尝试中英文双语的
运用Vue来构建一个Excel add-in
在这篇文章,你能够看到是怎样运用Vue和Excel的JavaScript API来构建一个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文件来设置和定义它的功用
- 进入app文件
cd vue-excel-addin
- 运用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.这篇文档无需翻开, 固然假如你猎奇的话,翻开也没紧要! 挑选 yes 或许 no 让天生东西完成它的事情把!
假如你被提醒要掩盖 package.json, 挑选 No (do not overwrite).
- 随着以下的教程来运转你的excel add-in吧
注重,请把manifest的相干端口修正成dev默许的8080以及将根目录的assets移入static并修正相干设置
- 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
- 编辑package.json 给dev剧本增加–https参数
更新app
- 翻开index.html, 把以下的
<script>
标签增加到</head>
之前
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
- 翻开src/main.js 将
`
new Vue({
el: ‘#app’,
components: {App},
template: ‘<App/>’
})`
替换成以下
Office.initialize = () => {
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
}
- 翻开 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>
试一下吧
- 在敕令行输入以下敕令
Windows:
npm start
macOs:
npm start
- 在Excel中的最先tab, 挑选Show Taskpane按钮来翻开add-in的task pane
- 挑选恣意一个地区的单元格
- 在task pane内, 点击 Set color按钮来将选中地区的色彩转为绿色