一、導語
智能媒體管理産品提供了
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 後加'/' ®ion=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後加'/' ®ion=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 加密文檔預覽
通過後端判斷是否加密文檔的結果，前端進行判斷，然後通過插件化架構加載 您的密碼輸入和安全管理控件，進而可以讓您預覽加密的文檔。