一、导语

智能媒体管理产品 提供了 Cloud Native 架构 的文档转换/预览服务，本文介绍其中的预览原理和使用方法。

二、预览原理

2.1 预览流程

2.1.1 部署和使用预览引擎

预览的核心，是利用前端 Java Script 渲染引擎，显示后端用 智能媒体管理 的文档转换 API 得到的结果（ 转换时使用VECTOR 模式）。

为了帮助您更好，我们提供了预览渲染引擎，地址为 https://preview.imm.aliyun.com/index.html ，参考 文档预览 获取更多信息，特别是配置存储转换数据的 OSS 桶支持 CORS。

从而通过如下方式实现文档预览。

https://preview.imm.aliyun.com/index.html    //确认 index.html 路径正确
?url=https://your-bucket.oss-cn-shanghai.aliyuncs.com/office-file/output    //无需在 output 后加'/'
&region=oss-cn-shanghai    //转换数据所在桶的 region
&bucket=your-bucket    //转换数据所在桶

其中，请求字段中 url=https://your-bucket.oss-cn-shanghai.aliyuncs.com/office-file/output 是传递给渲染引擎的路径，该路径下存放文档转换结果（ VECTOR 模式）。

注意：https://preview.imm.aliyun.com/index.html 是智能媒体管理服务提供的渲染引擎，your-bucket 是您自己的桶。

2.1.2 预览服务全流程

现基于阿里云构建的网盘服务 DEMO ，来讲解预览全流程，如下图所示。网盘服务 DEMO 在阿里云上开通 OSS 和 智能媒体管理产品 ，并且把预览的渲染引擎代码部署在网盘服务的域名环境下。

预览过程如下：
1) 网盘客户端 选择网盘中的某个文档 A，向 网盘服务端 发起预览请求。
2) 网盘服务端 得到文档 A 在 OSS 的路径，调用 智能媒体管理产品 文档转换的异步 API，可以指定转换文件的目标 OSS 路径。
3) 智能媒体管理产品 启动转换，同时返回目标 OSS 路径给 网盘服务端 。
4) 网盘服务端 将渲染引擎 index.html、相关 js 文件，以及目标 OSS 路径返回给 网盘客户端 。
5) 网盘客户端 在浏览器中基于 index.html，轮询目标 OSS 路径生成内容（也可以在调用文档转换 API 时注册事件通知，然后基于通知进行显示），一旦生成了内容，即开始渲染显示。
6) 智能媒体管理产品 文档转换的任务将转换目标文件写入到指定的 OSS 路径，直到转换完毕。

2.2 安全预览设计

文档预览可以在终端设备（例如智能手机）显示，因此需要考虑数据的安全性，在 智能媒体管理产品 的 Cloud Native 架构下，可以利用 OSS 的安全机制。

2.2.1 OSS 安全机制

使能 OSS 设置安全令牌，然后通过 STS 临时授权访问 为终端设备申请访问的 Token。

2.2.2 申请 Token 时控制 OSS 目标路径的只读权限的 Policy

在申请 STS 时，可以指定 OSS 路径的访问权限，如下为设置 office-file/output/* 资源的只读权限；其中 office-file/output 为指定存放转换结果输出的路径。

{
  "Version": "1",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "oss:*"
      ],
      "Resource": [
        "acs:oss:*:*:your-bucket/office-file/output/*"
      ]
    }
    {
        "Effect": "Allow",
        "Action": [
          "oss:ListObjects"
        ],
        "Resource": [
          "acs:oss:*:*:your-bucket"
        ],
        "Condition": {
          "StringLike": {
            "oss:Prefix": "office-file/output/*"
          }
        }
      }
  ]
}

云盘服务端申请 STS 的 Token 成功后，会得到 accessKeyId、accessKeySecret、stsToken 字段，然后发送给云盘客户端，客户端把这些字段加入到预览访问请求中，从而通过如下格式实现 安全访问 文档预览。

2.2.3 生成安全的预览URL

https://preview.imm.aliyun.com/index.html
?url=https://your-bucket. oss-cn-shanghai.aliyuncs.com/office-file/output    //无需在output后加'/'
&region=oss-cn-shanghai    //转换数据所在桶的region
&accessKeyId=STS.AAAAAAAAAA
&accessKeySecret=BBBBBBBBBBB
&stsToken=CCCCCCCCCCCCC    //CCCCCCCCCCCCC是encode(STS返回stsToken)的结果
&bucket=your-bucket    //转换数据所在桶

注意1：your-bucket 要替换为您自己的桶。
注意2：stsToken 字段，需要在STS返回的stsToken基础上使用encode处理，然后再拼到上述URL中，如下图红框所示（基于 nodeJS 实现）。

三、预览效果

3.1 支持大文件

如下图所示，在网盘 DEMO 中存放了 92.68 MB 大小的 pptx 文件 SP14 cs188 Lecture 18 -- Bayes Nets III Interface.pptx

3.2 预览翻页

通过转换并渲染得到的预览如下图所示，可以进行 左右翻页控制、全屏控制、以及缩放操作。

四、预览优化

基于前端使用渲染框架，后端提供渲染数据的解耦方案，还可以提供更多的特性。

4.1 定制化预览

通过前端提供 插件化框架，可以在预览时插入您自定义的广告，以及控制广告在页面的位置、长度、宽度，并且随着预览页面的缩放而联动。

4.2 加密文档预览

通过后端判断是否加密文档的结果，前端进行判断，然后通过插件化框架加载 您的密码输入和安全管理控件，从而可以让您预览加密的文档。

五、参考文档

1. 智能媒体管理产品文档转换/预览功能介绍(1)---Cloud Native架构
2. 智能媒体管理产品文档转换/预览功能介绍(2)---转换原理
3. 智能媒体管理产品文档转换/预览功能介绍(4)--快速搭建