Web前端(W3Cways.com) - Web前端学习之路
网上有很多教程，介绍怎么通过office中的 插入 > 获取加载项 > 添加Script Lab的方式去开发，调试office插件。但是在office中调试，还是有很多不便之处
本文详细介绍用Vue来开发office加载项
准备工作
- vue环境：这里vue2、vue3，vue-cli、或者vite搭建的环境都可以。我这里使用的是
vite+vue2+typescript(框架源码在此：Github) - office：最好用office 365。用office 2016开发的时候可能会提示版本太低等
Vue配置
1.全局（可选）安装最新版本的 Yeoman 和适用于 Office 加载项的 Yeoman 生成器
npm install -g yo generator-office
2.使用 Yeoman 生成器生成加载项清单文件
yo office
出现提示时，请提供以下信息以创建加载项项目。
- 选择项目类型：
Office Add-in project containing the manifest only - 要为外接程序命名什么名称？
My Office Add-in - 你希望支持哪个 Office 客户端应用程序？
Excel
如图：
操作完成后会在项目目录生成一个文件夹My Office Add-in，如下图：
在manifest.xml这个文件中做2个事情
- 批量替换 http://localhost:3000 为https://localhost:8080（你的vue项目的默认启动地址）
- 找到
<bt:Url id="Taskpane.Url"这行， 把DefaultValue的值得修改为https://localhost:8080/index.html
3.让应用支持https
项目根目录下执行如下命令
npx office-addin-dev-certs install
vue配置文件修改如下 vue.config.js
const fs = require("fs");
const path = require("path");
const homedir = require('os').homedir()
module.exports = {
devServer: {
port: 3000,
https: {
key: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.key`)),
cert: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.crt`)),
ca: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/ca.crt`)),
}
}
}
如果用的vite（vite不支持require），更改vite.config.ts如下
import { resolve } from 'path'
import { readFileSync } from 'fs'
import { homedir } from 'os'
export default defineConfig(() => {
return {
server: {
host: '0.0.0.0', //target host
port: 8080,
https: {
key: readFileSync(
resolve(
`${homedir()}/.office-addin-dev-certs/localhost.key`,
),
),
cert: readFileSync(
resolve(
`${homedir()}/.office-addin-dev-certs/localhost.crt`,
),
),
ca: readFileSync(
resolve(`${homedir()}/.office-addin-dev-certs/ca.crt`),
),
},
},
}
})
4.更新vue项目相关文件
4.1 打开./index.html 文件，并在</head>标记前面添加以下<script>标记。
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
4.2 打开 ./src/main.js 并将实例化vue的内容替换为以下代码
window.Office.onReady(() => {
new Vue({
router,
store,
render: (h: any) => h(App),
}).$mount('#app')
})
4.3 打开 ./src/App.tsx ，或者（ ./src/App.vue）并将文件内容替换为以下代码
//TSX写法 app.tsx
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
@Component({
components: {},
})
export default class App extends Vue {
onSetColor() {
window.Excel.run(async (context: any) => {
const range = context.workbook.getSelectedRange()
range.format.fill.color = 'green'
await context.sync()
})
}
render() {
return (
<div id="app">
<button onClick={this.onSetColor}>Set color</button>
</div>
)
}
}
//template写法 app.vue
<template>
<div id="app">
<div class="content">
<div class="content-header">
<div class="padding">
<h1>Welcome</h1>
</div>
</div>
<div class="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>
完成后即可启动vue服务 这里启动后地址为https://localhost:8080/
5.共享插件目录
这里需要获取到插件目录的网络路径，右键根目录中My Office Add-in文件夹属性，共享该文件夹，共享要给读写权限如下图
得到网络路径：\\DESKTOP-MBSD7K0\My Office Add-in
6 设置office
打开excel > 文件 > 选项 > 信任中心 > 信任中心设置 > 受信任的加载项目录，操作如图
7 使用
重启Excel，插入 > 获取加载项 > 共享文件夹，添加刚才导入的加载项，如图中所示步骤1、2、3
添加完后点击顶部工具栏最右侧，有个show Taskpane，点击后，步骤如图，即可实现把单元格背景色变成绿色的效果
注意：在如果使用的是 Windows 11 之前的 版本，必须安装 WebView2 控件，下载地址：https://developer.microsoft.com/microsoft-edge/webview2/
参考链接：
