智能媒体管理产品文档转换/预览功能介绍(3)---预览原理-阿里云开发者社区

开发者社区> 阿里云存储服务> 正文

智能媒体管理产品文档转换/预览功能介绍(3)---预览原理

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

一、导语

智能媒体管理产品 提供了 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 成功后,会得到 accessKeyIdaccessKeySecretstsToken 字段,然后发送给云盘客户端,客户端把这些字段加入到预览访问请求中,从而通过如下格式实现 安全访问 文档预览。

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 实现)。

EncodeSTSToken

三、预览效果

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)--快速搭建

版权声明:本文中所有内容均属于阿里云开发者社区所有,任何媒体、网站或个人未经阿里云开发者社区协议授权不得转载、链接、转贴或以其他方式复制发布/发表。申请授权请邮件developerteam@list.alibaba-inc.com,已获得阿里云开发者社区协议授权的媒体、网站,在转载使用时必须注明"稿件来源:阿里云开发者社区,原文作者姓名",违者本社区将依法追究责任。 如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

阿里云存储基于飞天盘古2.0分布式存储系统,产品多种多样,充分满足用户数据存储和迁移上云需求。

官方博客
链接