Intelligent Media Management:Vue3コンポーネント統合

Step 1: Import the SDK

HTMLページ（この例ではindex.html）に、scriptタグを使用してSDKをインポートします。

SDK は非モジュール参照を使用してのみインポートできます。SDK をインポートする際は、要件に基づいてバージョン番号を指定してください。

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

詳細については、SDK のバージョンをご覧ください。

ステップ 2: 使用する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 フック内で行われます。") // 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) => {
          // 次の refreshTokenFun 呼び出しのために情報を保存します。 // Save the information for the next refreshTokenFun call.
          Object.assign(tokenInfo, data);

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

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

ステップ 3: 使用するWebOffice.vueコンポーネント

<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(){
    // サーバー側で IMM の GenerateWebofficeToken 操作を呼び出します。 // 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(){
    // サーバー側で IMM の RefreshWebofficeToken 操作を呼び出します。 // 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>

サーバーで操作をカプセル化する方法の詳細については、手順 1: サーバーでの操作のカプセル化を参照してください。