使用Vue开发office加载项(插件)

2022-11-25阅读(392)评论(0)牵着狗狗看MM

苏州实时公交查询

网上有很多教程,介绍怎么通过office中的 插入 > 获取加载项 > 添加Script Lab的方式去开发,调试office插件。但是在office中调试,还是有很多不便之处

本文详细介绍用Vue来开发office加载项

 

准备工作

  1. vue环境:这里vue2、vue3,vue-cli、或者vite搭建的环境都可以。我这里使用的是vite+vue2+typescript (框架源码在此:Github)
  2. office:最好用office 365。用office 365开发的时候可能会提示版本太低等

 

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个事情

  1. 批量替换 http://localhost:8080 为https://localhost:8080(你的vue项目的默认启动地址)
  2. 找到 <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,点击后,步骤如图,即可实现把单元格背景色变成绿色的效果

 

参考链接:

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 使用Vue开发office加载项(插件)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏