快速入门 - 智能媒体管理

获取文档的预览地址和AccessToken后，无需指定iframe元素，JS文件会自动在自定块元素下生成iframe，并通过JS文件设置AccessToken即可快捷的实现文档预览。文档预览时支持自定义配置，包括组件状态、事件、文字相关、表格相关等配置。

预览原理

获取文档的预览地址和AccessToken后，无需指定iframe元素，JS文件会自动在自定块元素下生成iframe，并通过JS文件设置AccessToken即可快捷的实现文档预览。

准备工作

当访问的OSS Bucket域名与预览引擎的域名不同时，需要在OSS控制台将预览服务域名添加到存储转换后文档的OSS Bucket的跨域访问列表中。具体操作，请参见设置跨域访问。

预览流程

上传原始文档到对象存储OSS中。具体操作，请参见上传文件。
在服务端分别封装GetWebofficeURL和RefreshWebofficeToken接口。
通过JS-SDK将返回的预览地址挂载到HTML块状元素中并设置AccessToken。

服务端封装接口

在服务端需要分别封装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分钟示例说明。
})

超时更新令牌（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://example.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
})