阿里云首页 智能媒体管理

快速入门

文档在线协作(编辑)和文档预览的接入方式以及前端使用的JS-SDK均相同。后端接口获取AccessToken和编辑URL的方式不同。

服务端封装接口

在服务端需要分别封装 GetWebofficeURL和RefreshWebofficeToken接口,用于获取编辑地址和AccessToken,方便前端直接调用。

  1. 调用GetWebofficeURL接口,获取协作地址。 返回结果示例如下:

    {
      "RefreshToken": "306ffe61897443c8909aaad325********",
      "RequestId": "D807F412-1EE0-44E0-A60F-47C27B4046CF",
      "AccessToken": "7f9b6ba5baef4c7d80f837d4c9********",
      "RefreshTokenExpiredTime": "2021-04-21T06:48:10.161355914Z",
      "WebofficeURL": "https://office-cn-shanghai.imm.aliyuncs.com/office/p/9eea88df758a75b6308358500a9e141ccf3b7629?_w_tokentype=1",
      "AccessTokenExpiredTime": "2021-04-20T07:18:10.161355914Z"
    }
  2. 调用RefreshWebofficeToken接口, 刷新AccessToken。

    AccessToken具有时效性,当过期后前端需要调用服务端RefreshWebofficeToken接口重新刷新AccessToken,所以需要在服务端封装此接口。调用此接口的返回结果格式和调用GetWebofficeURL接口的相同。

前端JS-SDK使用

  1. 引入JS-SDK。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Demo</title>
    </head>
    <body>
      <script src="https://g.alicdn.com/IMM/office-js/${x.y.z}/aliyun-web-office-sdk.min.js"></script>
      <script>
        console.log('引入后可以开始使用JS-SDK了!');
        console.log(aliyun); //全局变量名。
      </script>
    </body>
    </html>

    以上示例中${x.y.z}表示最新版本号,请根据实际填写,最新版本请参见版本

  2. 接入WebOffice。

    通过在服务端封装的GetWebofficeURL接口获取tokenInfo对象。假设tokenInfo对象和调用GetWebofficeURL接口返回的结构一致。

    如下示例以服务端封装的GetWebofficeURL接口为/getTokenInfo举例说明。

    //获取协作地址和AccessToken。
    var tokenInfo = await $.get('http://your_server.com/getTokenInfo')
     
    let instance = aliyun.config({
      url: tokenInfo.WebofficeURL //设置文档协作URL地址。
    })
    //设置AccessToken。
    instance.setToken({
      token: tokenInfo.AccessToken
    })
  3. 自定义Office(iframe)挂载点。

    说明

    DOMContentLoaded事件被触发后,请确保挂载节点存在再执行初始化操作。

    iframe(#iframe)默认会挂载到body下,可根据需要自定义iframe(#iframe)的挂载点。

    <div id="container"></div>
    aliyun.config({
      mount: document.querySelector('#container'),
      url: '文档协作URL地址' //即步骤2示例中的文档协作URL地址(tokenInfo.WebofficeURL)。
    })

    如果需要对iframe对象做特殊处理,可以通过JS-SDK实例化对象快速获取到iframe的DOM(Document Object Model)对象。

    var instance = aliyun.config({
        mount: document.querySelector('#container')
       //...
    })
    console.log(instance.iframe)
  4. 设置令牌(Token)。

    • 在获取协作地址后,需要设置令牌才能在线协作。

    • 每次刷新令牌后,也需要通过此方法设置令牌。

    //根据业务需求通过异步请求或者模板输出的方式获取token。
    var token = 'yourToken'; 
    //设置token。
    instance.setToken({
      token: token, 
      timeout: 10 * 60 * 1000, //必须设置。token的超时时间,单位为ms。以10分钟示例说明。
    }) 
  5. 超时更新令牌(Token)。

    通过在服务端封装的RefreshWebofficeToken接口获取tokenInfo对象。假设tokenInfo对象和调用RefreshWebofficeToken接口返回的结构一致。

    您可以通过传入获取Token的函数,在Token超时时,JS-SDK会自动调用传入的函数重新获取Token,返回一个promise或者object。

    如下示例以服务端封装的GetWebofficeToken接口为/refreshTokenInfo举例说明。

    //缓存上次的tokenInfo,用于刷新token。
      let lastTokenInfo = tokenInfo
    
    //获取token函数。
      const refreshToken = async () => {
        //业务处理逻辑,调用服务端封装的refreshToken接口。
        let tokenInfo = await $.get('http://your_server.com/refreshTokenInfo',{
           RefreshToken: lastTokenInfo.RefreshToken,
           AccessToken: lastTokenInfo.AccessToken,
           //....
        })
        lastTokenInfo = tokenInfo
        return {
          token: tokenInfo.AccessToken, //必须设置。
          timeout: 10 * 60 * 1000, //必须设置。token超时时间,单位为ms。可配合refreshToken配置函数使用,在超时前调用refreshToken重新刷新token。
        }
      }
    //配置超时获取token函数。
    aliyun.config({
      //...
      refreshToken
    })