React 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.jsx component to send calls to the SDK

import { useRef, useEffect } from "react";

export default function WebOffice(
  { getTokenFun, refreshTokenFun }  
) {
  
  const containerRef = useRef(null);

  useEffect(() => {
    // Call init when the DOM is ready.
    init(containerRef.current);
  }, []);

  async function init(mount, timeout=10*60*1000) {
    // Obtain a token.
    let tokenInfo = await getTokenFun()
  
    let ins = window.aliyun.config({
      mount,
      url: tokenInfo.WebofficeURL,
      refreshToken: ()=>{
        // Refresh the token when the timeout period elapses.
        return 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 
    })
  }

  return (
    <div
      ref={containerRef.current}
      style={{ width: "100%", height: "100%" }}
    ></div>
  );
}

Step 3: Use the WebOffice.jsx component

import WebOffice from './WebOffice.jsx'

function App(){

  // 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": "f1fd1a*************35ffv3",
      "RequestId": "BC63*************BC89",
      "AccessToken": "3de2*************ae39v3",
      "RefreshTokenExpiredTime": "2022-07-06T23:18:52.856132358Z",
      "WebofficeURL": "https://office-cn-shanghai.imm.aliyuncs.com/office/w/7c1a7b53d6a4002751ac4bbaea69405a01475f4a?_w_tokentype=1",
      "AccessTokenExpiredTime": "2022-07-05T23:48:52.856132358Z"
    }
  }
  // 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": "f1fd1a*************34f35ffv3",
      "RequestId": "BC63D2*************43943DBC89",
      "AccessToken": "3de242*************00aaae39v3",
      "RefreshTokenExpiredTime": "2022-07-06T23:18:52.856132358Z",
      "WebofficeURL": "https://office-cn-shanghai.imm.aliyuncs.com/office/w/7c1a7b53d6a4002751ac4bbaea69405a01475f4a?_w_tokentype=1",
      "AccessTokenExpiredTime": "2022-07-05T23:48:52.856132358Z"
    }
  }

  // The document size can be set by using the container-parent style.
  return (
    <>
      <div className="container-parent">
        <WebOffice getTokenFun={getTokenFun} refreshTokenFun={refreshTokenFun}/>
      </div>
    </>
  )
}

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