如何快速使用文档在线预览和协作编辑_智能媒体管理-阿里云帮助中心

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

服务端封装接口

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

调用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"
}

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

前端JS-SDK使用

引入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}表示最新版本号，请根据实际填写，最新版本请参见版本。

接入WebOffice。

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

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

//获取协作地址和AccessToken。
var tokenInfo = await $.get('http://example.com/getTokenInfo')
 
let instance = aliyun.config({
  url: tokenInfo.WebofficeURL // 设置文档协作URL地址。
})
// 设置AccessToken。
instance.setToken({
  token: tokenInfo.AccessToken
})

自定义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)
```

设置令牌（Token）。

在获取协作地址后，需要设置令牌才能在线协作。
每次刷新令牌后，也需要通过此方法设置令牌。

// 根据业务需求通过异步请求或者模板输出的方式获取Token。
var token = 'yourToken'; 
// 设置Token。
instance.setToken({
  token: token, 
  timeout: 10 * 60 * 1000, // 必须设置。Token的超时时间，单位为ms。以10分钟示例说明。注意：JS-SDK会提前5分钟调用刷新Token方法，所以设置的timeout应在10分钟以上（10 * 60 * 1000 以上，单位为毫秒），避免刷新过快。
})

超时更新令牌（Token）。

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

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

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

// 缓存上次的tokenInfo，用于刷新Token。
  let lastTokenInfo = tokenInfo

// 获取Token函数。
// refreshToken方法暂不支持async或await，仅支持返回Promise，或者{token,timeout}对象。
  const refreshToken = function() {
    return new Promise(function(resolve){
      // 业务处理逻辑，调用服务端封装的refreshToken接口。
      $.get('http://example.com/refreshTokenInfo',{
        RefreshToken: lastTokenInfo.RefreshToken,
        AccessToken: lastTokenInfo.AccessToken,
        //....
      }).then(function(tokenInfo){
        lastTokenInfo = tokenInfo
        resolve({
          token: tokenInfo.AccessToken, // 必须设置。
          timeout: 10 * 60 * 1000, // 必须设置。Token超时时间，单位为ms。可配合refreshToken配置函数使用，在超时前调用refreshToken重新刷新Token。
        })
      })
    })
  }
// 配置超时获取Token函数。
aliyun.config({
  //...
  refreshToken
})

示例代码

文档预览完整示例如下。

<!DOCTYPE html>
<html>
<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/1.1.15/aliyun-web-office-sdk.min.js"></script>
  <div id="container"></div>
  <script> 
    window.onload = init;
    var tokenInfo = await axios.get("http://example.com/getTokenInfo") // 调用后端接口获取预览链接和凭证。
    function init() {
      weboffice(tokenInfo)
    }
    function weboffice(tokenInfo) {
      var demo = aliyun.config({
        mount: document.querySelector('#container'),
        url: tokenInfo.WebofficeURL,
        refreshToken: refreshTokenPromise // 设置Token过期自动刷新。
      });
      demo.setToken({
        token: tokenInfo.AccessToken,
        timeout: 10 * 60 * 1000 // 设置Token过期时间，单位为ms。此处设置为10分钟之后刷新Token。
      });
    }

    // refreshToken方法暂不支持async或await，仅支持返回Promise，或者普通对象{token,timeout}。
    function refreshTokenPromise() {
      return new Promise(function(resolve){
        axios.get('http://example.com/refreshTokenInfo',{
        RefreshToken: lastTokenInfo.RefreshToken,
        AccessToken: lastTokenInfo.AccessToken,
        //....
        })
        .then(r => r.data)
        .then(function(data) {
          // 保存通过刷新接口获取的新预览凭证供下次刷新用。
          tokenInfo = data
          resolve({
            token: tokenInfo.AccessToken,
            timeout: 10*60*1000 
          })
        })
      })
    }
  </script>
</body>
</html>