介绍文档预览V2的实现和使用方法。

文档预览V2是新版本的文档预览,相对于旧版本的文档预览做了如下改进。
  • 用户无需提交文档转化任务,只要向IMM获取预览地址和AccessToken。
  • 用户使用iframe嵌入文档预览地址,并通过IMM提供的JS文件(简称JS-SDK)设置AccessToken即可进行预览。

预览原理

文档预览V2的过程如下,原理图如下图所示。
  1. 上传需要预览的文件到对象存储OSS
  2. 调用IMM的GetOfficePreviewURL接口,获取预览地址和AccessToken。
  3. 通过JS-SDK将返回的预览地址挂载到HTML块状元素中,并设置AccessToken,即可预览。
fig_IMM_preview001

服务端封装接口

服务器端需要封装GetOfficePreviewURLRefreshOfficePreviewToken2个接口。

  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兼容的浏览器版本如下。

说明 产品会定期更新适配各平台的主流浏览器最新版本。
平台 支持浏览器
iOS
  • Safari
  • QQ内置浏览器
Android QQ内置浏览器
Windows
  • Chrome
  • QQ浏览器(非兼容模式)
  • EDGE
  • 火狐
  • Internet Explorer 11:只保证能打开预览,但不能保证编辑功能完全兼容
Mac OSX
  • Chrome
  • Safari
  • QQ浏览器
  • EDGE
  • 火狐
JS-SDK不包含promise-polyfill,如果需要兼容没有内置Promise对象的低版本浏览器(例如Internet Explorer 11),则需要在JS-SDK之前引入promise polyfill。
<script src="//unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js">