Intelligent Media Management:Vue3 component integration

Step 1: Import the SDK

Import the SDK into the HTML page (index.html in this example) by using the script tag.

The SDK can be imported only by using a non-module reference. When you import the SDK, specify the version number based on your requirements.

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

For more information, see SDK versions.

Step 2: Use the WebOffice.vue component to send calls to the 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("Check whether the mount node element exists.   In most cases, the call is made within the onMounted hook.")
    }
    // Obtain a token.
    let tokenInfo = await props.getTokenFun();

    let ins = window.aliyun.config({
      mount,
      url: tokenInfo.WebofficeURL,
      refreshToken: () => {
        // Refresh the token when the timeout period elapses.
        return props.refreshTokenFun(tokenInfo).then((data) => {
          // Save the information for the next refreshTokenFun call.
          Object.assign(tokenInfo, data);

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

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

Step 3: Use the WebOffice.vue component

<template>
  <! -- You can customize the size of the container-parent element.-->
  <div class="container-parent">
    <WebOffice :getTokenFun="getTokenFun" :refreshTokenFun="refreshTokenFun"/>
  </div>
</template>

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

  // Define a function for obtaining tokens.
  async function getTokenFun(){
    // Call the GenerateWebofficeToken operation of IMM on the server side.

    // Return information in the following format:
    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"
    };
  }
  // Define a function for refreshing tokens.
  async function refreshTokenFun(){
    // Call the RefreshWebofficeToken operation of IMM on the server side.

    // Return information in the following format: 
    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>

For more information about how to obtain a token, see Step 1: Encapsulate the operations on the server.