React 组件接入文档

步骤一：引入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.jsx调用JS-SDK

import { useRef, useEffect } from "react";

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

  useEffect(() => {
    // dom ready 时调用 init
    init(containerRef.current);
  }, []);

  async function init(mount, timeout=10*60*1000) {
    // 获取 token
    let tokenInfo = await getTokenFun()
  
    let ins = window.aliyun.config({
      mount,
      url: tokenInfo.WebofficeURL,
      refreshToken: ()=>{
        // timeout过期时刷新 token
        return refreshTokenFun(tokenInfo).then((data)=>{
          // 保存供下次 refreshTokenFun 用
          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>
  );
}

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

import WebOffice from './WebOffice.jsx'

function App(){

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

    // 返回格式如下
    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"
    }
  }
  // 定义刷新 token 函数
  async function refreshTokenFun(){
    // 调用 web 服务端接口，服务端调用 IMM RefreshWebofficeToken 接口
    
    // 返回格式如下 
    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"
    }
  }

  // 文档尺寸可以通过 container-parent 样式设置
  return (
    <>
      <div className="container-parent">
        <WebOffice getTokenFun={getTokenFun} refreshTokenFun={refreshTokenFun}/>
      </div>
    </>
  )
}

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