智能媒体管理 快速入门

预览原理

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

准备工作

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

预览流程

1. 上传原始文档到对象存储OSS中，详情请参见上传文件。
2. 在服务端分别封装GetOfficePreviewURL和RefreshOfficePreviewToken接口，详情请参见服务端封装接口。
3. 通过JS-SDK将返回的预览地址挂载到HTML块状元素中并设置AccessToken，详情请参见前端JS-SDK使用。

服务端封装接口

前端JS-SDK使用

1. 引入JS-SDK。

   在需要调用的页面引入如下JS-SDK。

   <script src="https://g.alicdn.com/IMM/office-js/${x.y.z}/aliyun-web-office-sdk.min.js"></script>

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

2. 接入WebOffice。

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

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

   //获取预览地址和AccessToken。
   var previewInfo = await $.get('http://your_server.com/getPreviewUrl')
   
   preview(previewInfo)
   
   function preview(previewInfo){
     let demo = aliyun.config({
       url: previewInfo.PreviewURL //设置文档预览URL地址。
     })
     //设置AccessToken。
     demo.setToken({token: previewInfo.AccessToken})
   }                   

3. 自定义Office(iframe)挂载点。
   说明 在domcontentloaded事件触发后，请确保挂载节点存在再执行初始化操作。

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

   <div id="container"></div>

   aliyun.config({
     mount: document.querySelector('#container'),
     url: '文档预览url地址' //即步骤2示例中的文档预览URL地址（previewInfo.PreviewURL）。
   })

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

   var demo = aliyun.config({
       mount: document.querySelector('#container')
   })
   console.log(demo.iframe)

4. 设置令牌（Token）。
   • 在获取预览地址后，需要设置令牌才能预览。
   • 每次刷新令牌后，也需要通过此方法设置令牌。

   //根据业务需求通过异步请求或者模板输出的方式获取token。
   var token = 'yourToken'; 
   //设置token。
   demo.setToken({
     token: token, 
     timeout: 100000 //token的超时时间，可配合refreshToken配置函数使用，当token超时前将调用refreshToken。
   }) 

5. 超时更新令牌（Token）。

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

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

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

   //获取token函数。
     const refreshToken = () => {
       //业务处理逻辑，调用服务端封装的refreshToken接口。
   
       return {
         token: 'yourToken', //必须设置。
         timeout: 100000 //token的超时时间，必须设置。
       }
     }
   //配置Token超时时，获取Token的函数。
   aliyun.config({refreshToken})

   //获取token函数。
     const refreshToken = () => {
       //业务处理逻辑，调用服务端封装的refreshToken接口。
   
       return Promise.resolve({
         token: 'yourToken', //必须设置。
         timeout: 100000 //token的超时时间，必需设置。
       })
     }
   //配置超时获取token函数。
   aliyun.config({refreshToken})

JS-SDK兼容性

JS-SDK兼容的浏览器版本请参见下表。

<script src="//unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js">