文档预览-v2
文档预览v2 是新版本的文档预览,基于旧的预览版本,做了如下改进
- 用户不需要提交文档转化任务,只需要向 IMM 获取预览地址和 AccessToken
- 用户使用 Iframe 嵌入文档预览地址,并通过 IMM 提供的 js sdk 设置 AccessToken 即可进行预览。
下面重点跟大家讲解下文档预览v2的实现以及使用方法。
1. 预览原理
- 上传需要预览的文件存储在对象存储 OSS 中。
- 调用智能媒体管理的 [获取文档预览地址] 接口,获取预览地址和 AccessToken
- 通过 JS SDK 将返回的预览地址mount到HTML块状元素中,并设置 AccessToken,即可预览。
2. 服务端需要封装2个接口
(1) 获取预览地址
前端需要调用服务端接口,获取预览地址和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) 刷新Token
AccessToken具有时效性,过期了前端需要调用这个服务端接口重新刷新Token。您需要在您的服务端封装一下这个接口。
返回结果的格式和上面的接口一样。
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为配置的对象
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
评论