文档预览v2 是新版本的文档预览，基于旧的预览版本，做了如下改进

1. 用户不需要提交文档转化任务，只需要向 IMM 获取预览地址和 AccessToken
2. 用户使用 Iframe 嵌入文档预览地址，并通过 IMM 提供的 js sdk 设置 AccessToken 即可进行预览。

下面重点跟大家讲解下文档预览v2的实现以及使用方法。

1. 预览原理

1. 上传需要预览的文件存储在对象存储 OSS 中。
2. 调用智能媒体管理的 [获取文档预览地址] 接口，获取预览地址和 AccessToken
3. 通过 JS SDK 将返回的预览地址mount到HTML块状元素中，并设置 AccessToken，即可预览。

2. 服务端需要封装2个接口

(1) 获取预览地址

前端需要调用服务端接口，获取预览地址和AccessToken。您需要在您的服务端封装一下这个接口。

GetOfficePreviewURL API

返回结果举例：

{
    "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) 刷新Token

AccessToken具有时效性，过期了前端需要调用这个服务端接口重新刷新Token。您需要在您的服务端封装一下这个接口。

RefreshOfficePreviewToken API

返回结果的格式和上面的接口一样。

2. 前端 JS-SDK 使用

(1) 引入 JS 文件

在需要调用的页面引入如下 JS 文件(officeSdk.js)

<script src="https://g.alicdn.com/IMM/office-js/index.min.js"></script>

(2) 接入 Office

假设你的服务端提供了/getPreviewUrl来获取预览地址和AccessToken（自己封装 IMM 的GetOfficePreviewURL接口）。

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

JS-SDK 会自动创建 iframe(#iframe)，它默认会挂载到 body 下。

(3) 自定义 Office(iframe) 挂载点

<div id="container></div>

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

3. 前端 JS-SDK 高级功能

事件监听

通过 .on 方法进行事件监听

demo.on("事件名", function(data){
    // ....
})

监听打开文件事件

demo.on("fileOpen", function(data){
    // ....
})

文档呈现结果，无论成功或者失败，都会触发该事件,回调数据格式如下

// 打开并渲染成功
{
    success: true,
    time: 111
}
// 打开失败
{
    success: false, 
    time: 2000, // 当前时间 - 文档开始时间
    reason: "UnsupportedSecurityDoc", // 错误代码
    lastStage: {} // 同stage数据格式， 最后触发的stage 
}

以下是错误代码Map

{
    Unknown: 'Unknown',
    Page404: 'Page404',
    UserNotLogin: 'userNotLogin',
    // 无效链接
    InvalidLink: 'InvalidLink',
    // 需要打开密码
    NeedPassword: 'NeedPassword',
    // 需要输入修改密码
    NeedModifyPassword: 'NeedModifyPassword',
    // 密码错误
    InvalidPassword: 'InvalidPassword',
    // 协作成员已满
    SessionFull: 'SessionFull',
    // 打开失败
    OpenFailed: 'Fail',
    // 服务不可用，一般不提示给用户，静默重试
    Unavailable: "Unavailable",
    // 链接文档审核中
    FileUnderReview: "FileUnderReview",
    // 文件已被禁止访问
    LightlinkForbid: 'lightlinkForbid',
    // 您的操作权限不足
    PermissionDenied: 'PermissionDenied',
    // 已申请恢复访问
    DidResumptionVisit: 'DidResumptionVisit',
    // 打开文件时遇到错误，可能是：此文件格式和扩展名不匹配；文件已经损坏或不安全
    Fail: 'Fail',
    // 获取Token失败
    GetTokenFailed: 'GetTokenFailed',
    // 移除编辑权限
    PermissionRevoked: 'PermissionRevoked',
    // 会话过期
    SessionExpired: 'SessionExpired',
    // 暂不支持打开帐号加密文档
    UnsupportedSecurityDoc: "UnsupportedSecurityDoc",
    // 该文件大于60M，不支持预览服务
    fileTooLarge: 'fileTooLarge',
}

更新配置

demo.updateConfig(config) // config为配置的对象