Vue3组件接入文档

步骤一：引入 JS-SDK

首先在 index.html通过 script 标签引入 js-sdk。

JS-SDK仅支持非模块化引用方式。引用时，请根据实际填写版本号。

<script src="https://g.alicdn.com/IMM/office-js/1.1.19/aliyun-web-office-sdk.min.js"></script>

详细内容请参见JS-SDK版本。

步骤二：组件 WebOffice.vue 调用 JS-SDK

<template>
  <div ref="containerRef" style="width: 100%; height: 100%"></div>
</template>

<script setup>
  import { onMounted, ref } from "vue";

  const containerRef = ref(null);

  onMounted(() => {
    init(containerRef.value);
  });

  const props = defineProps({
    getTokenFun: {
      type: Function,
      required: true
    },
    refreshTokenFun: {
      type: Function,
      required: true
    },
  });

  async function init(mount, timeout = 10 * 60 * 1000) {
    if(!mount){
      console.error("确保挂载节点元素存在。 一般在 onMounted 钩子中调用。")
    }
    // 获取 token
    let tokenInfo = await props.getTokenFun();

    let ins = window.aliyun.config({
      mount,
      url: tokenInfo.WebofficeURL,
      refreshToken: () => {
        // timeout过期时刷新 token
        return props.refreshTokenFun(tokenInfo).then((data) => {
          // 保存供下次 refreshTokenFun 用
          Object.assign(tokenInfo, data);

          return {
            token: tokenInfo.AccessToken,
            timeout,
          };
        });
      },
    });

    ins.setToken({
      token: tokenInfo.AccessToken,
      timeout,
    });
  }
</script>

步骤三：如何使用 WebOffice.vue 组件

<template>
  <!-- container-parent 可以自定义尺寸 -->
  <div class="container-parent">
    <WebOffice :getTokenFun="getTokenFun" :refreshTokenFun="refreshTokenFun"/>
  </div>
</template>

<script setup>
  import WebOffice from './WebOffice.vue'

  // 定义获取 token 函数
  async function getTokenFun(){
    // 调用 web 服务端接口，服务端调用 IMM GenerateWebofficeToken 接口

    // 返回格式如下
    return  {
      "RefreshToken": "832e016*******b069eev3",
      "RequestId": "652FE412*******350FD7BB4",
      "AccessToken": "e20583822*******8905dv3",
      "RefreshTokenExpiredTime": "2024-07-11T06:41:25.887690174Z",
      "WebofficeURL": "https://office-cn-beijing.imm.aliyuncs.com/office/w/323c0e584a6bed44613ddf9a6bed3f27f0544c5f?_w_tokentype=1",
      "AccessTokenExpiredTime": "2024-07-10T07:11:25.887690174Z"
    };
  }
  // 定义刷新 token 函数
  async function refreshTokenFun(){
    // 调用 web 服务端接口，服务端调用 IMM RefreshWebofficeToken 接口

    // 返回格式如下 
    return  {
      "RefreshToken": "832e016e8f*******d7b069eev3",
      "RequestId": "652FE41*******9350FD7BB4",
      "AccessToken": "e2058382*******8905dv3",
      "RefreshTokenExpiredTime": "2024-07-11T06:41:25.887690174Z",
      "WebofficeURL": "https://office-cn-beijing.imm.aliyuncs.com/office/w/323c0e584a6bed44613ddf9a6bed3f27f0544c5f?_w_tokentype=1",
      "AccessTokenExpiredTime": "2024-07-10T07:11:25.887690174Z"
    };
  }
</script>


<style>
  .container-parent{
    width: 800px;
    height: 600px;
  }
</style>

如何获取token，请看步骤一：服务端封装接口。