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

2022-11-25阅读(334)评论(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,点击后,步骤如图,即可实现把单元格背景色变成绿色的效果

     

    参考链接:

  • 设置开发环境 – Office Add-ins | Microsoft Learn
  • 使用 Vue 生成 Excel 任务窗格加载项
  • 旁加载 Office 加载项以从网络共享进行测试
  • Office 加载项 JavaScript API 参考
  • 赞(0) 打赏
    转载请注明来源:Web万博ManBetXapp(W3Cways.com) - Web万博ManBetXappManBetX万博体育网页版之路 » 使用Vue开发office加载项(插件)
    分享到: 更多 (0)

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

    支付宝扫一扫打赏

    微信扫一扫打赏

  • 阿里云服务器
    阿里云服务器