如何接入

预览原理

服务端封装接口

服务器端需要封装GetOfficePreviewURL和RefreshOfficePreviewToken2个接口。

1. 获取预览地址。

   前端需要调用服务端GetOfficePreviewURL接口获取预览地址和AccessToken，所以需要在服务端封装此接口。

   返回结果示例

   {
       "AccessTokenExpiredTime":"2020-02-04T10:53:47.999Z",
       "PreviewURL":"https://office-cn-shanghai.imm.aliyuncs.com/office/w/1023210024677934_a2_3899cdbd16b3061554556d9e949bb2fe85a944030bf147f8de1d79036f5e5a25?hidecmb=1&simple=1&_w_tokentype=1",
       "AccessToken":"ac80b70a70fe4c34914a12743ac3a6fb",
       "RefreshTokenExpiredTime":"2020-02-05T10:23:47.999Z",
       "RequestId":"F07DA595-194D-45A7-8752-ABBADBB1297F",
       "RefreshToken":"44dd1a2012f5467bba1521b213e5a461"
   }

2. 刷新AccessToken。

   AccessToken具有时效性，当过期后前端需要调用服务端RefreshOfficePreviewToken接口重新刷新AccessToken，所以需要在服务端封装此接口。

   调用此接口的返回结果格式和调用GetOfficePreviewURL接口的相同。

前端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。

   如果服务端提供/getPreviewUrl获取预览地址和AccessToken（用户自定义封装的GetOfficePreviewURL接口），JS-SDK会自动创建iframe(#iframe)，iframe(#iframe)默认会挂载到body下。

   //获取预览地址和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)挂载点。

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

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

   aliyun.config({
     mount: document.querySelector('#container'),
     url: '文档预览url地址'
   })

   如果需要对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}) 

兼容性

JS-SDK兼容的浏览器版本如下。

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