脚本宝典收集整理的这篇文章主要介绍了vue-excel-addin,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
项目需求 有空就尝试使用vue去构建一个excel addin
微软太坑爹了,只给了ng react jquery的教程
文档会尝试中英文双语的
在这篇文章,你可以看到是如何使用Vue和Excel的JavaScript API来构建一个Excel add-in的
npm install --global vue-cli
npm install -g yo generator-office
使用vue-cli来搭建脚手架,在命令行输入如下命令:vue init webpack vue-excel-addin
每个add-in都需要一个manifest文件来配置和定义它的功能
cd vue-excel-addin
yo office
生成工具会问你是否需要打开 resource.html.这篇文档无需打开, 当然如果你好奇的话,打开也没关系! 选择 yes 或者 no 让生成工具完成它的工作把!
<script>
标签添加到</head>
之前<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
`
new Vue({`
替换成以下Office.initialize = () => {
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
}
<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>
npm start
npm start
以上是脚本宝典为你收集整理的vue-excel-addin全部内容,希望文章能够帮你解决vue-excel-addin所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。