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

预览原理

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

fig_IMM_preview001

准备工作

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

预览流程

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

服务端封装接口

在服务端分别封装GetOfficePreviewURL和RefreshOfficePreviewToken接口,用于获取预览地址和AccessToken,方便前端直接调用。
  1. 调用GetOfficePreviewURL接口,获取预览地址。
    返回结果示例
    {
        "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. 调用RefreshOfficePreviewToken接口,刷新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。

    通过在服务端封装的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兼容的浏览器版本请参见下表。

说明 产品会定期更新适配各平台的主流浏览器最新版本。
平台 支持浏览器
iOS
  • Safari
  • QQ内置浏览器
  • QQ小程序
  • 微信内置浏览器
  • 微信小程序
Android
  • QQ内置浏览器
  • QQ小程序
  • 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">