一、導語
說起 Microsoft Office 辦公三件套，想必大家都不會陌生，社畜日常的工作或者生活中，多多少少遇到過這種情況：
-
本地創建的文檔換一台電腦打開，就出現了字體丟失、排版混亂的情況；
-
客戶爸爸發來一個文檔，想看內容需要下載，下載后發現和自己工作沒有一毛錢關系，無奈之下秒送回收站；
-
網站上搜索到一篇干貨文章，提示下載后才能查看，結果下載包夾帶了未知來源的文件；
-
疫情下移動辦公需求激增，而移動端打開文檔需要在不同軟件之間跳轉，體驗割裂；
某平台文檔預覽效果
這種時候，我們往往需要一個能夠在線預覽文檔的靠譜工具，那么有沒有不需要運維成本、效果滿分、接入方便、並且性價比高的辦法呢？是時候介紹COS 的文檔預覽能力了！
COS文檔預覽效果
二、什么是 COS 文檔預覽
COS 是騰訊雲對象存儲的簡稱，簡單來說，就是存在 COS 上的每一個文件，都有自己的專屬下載鏈接。COS 集成了數據萬象 CI 的文檔預覽能力，只需要在下載鏈接后拼接簡易的參數，就可以將存儲在 COS 上的文件轉碼為圖片/PDF 或 轉碼為 HTML5 頁面，支持ppt、doc、xls、txt、html 等50多種格式文件，解決了文檔內容的頁面展示問題，滿足 PC、App 等多個用戶端的文檔在線瀏覽需求。
COS文檔預覽的優勢和特性
三、適用場景
（一）在線教育
實現課件、隨堂講義等文檔的在線瀏覽，降低學生使用門檻，增強體驗。可在瀏覽器中完整呈現 PPT 中的動畫、公式、觸發器等效果，並通過水印、防復制等功能，保護課程的版權。用戶還可選擇將課件轉為圖片存至雲端，實現資料的輕量化分發。
（二）企業 OA
幫助企業實現 PC、APP 多端下，內部文檔資料的在線預覽。用戶無需將文件下載到本地，即可通過多平台隨時訪問文檔文件內容。實現內部文檔公開化、透明化的同時，通過水印、防復制等功能，杜絕泄漏風險。
（三）在線網盤
解決文檔內容的網頁展示問題，在線瀏覽時最大程度保留源文檔樣式，滿足 PC、APP 等多端的文檔在線瀏覽需求。
（四）網站轉碼
網站顯示文檔內容常受限於瀏覽器規則和設備性能，並且需要同時適配 PC 和移動端；文檔預覽功能支持對多種文件類型生成 html 或圖片格式預覽，實現文檔的快速、精准預覽。
四、接入方案
| 方案 | 分類 | 特點 | 場景 |
|---|---|---|---|
| 文檔轉圖片預覽 | a. 同步轉圖片預覽（推薦） | 實時在線預覽使用簡單 | 適用於實時的word/pdf預覽場景 |
| b. 異步轉圖片預覽 | 異步轉碼任務高效持久化 | 適用於有開發能力，單次轉碼多次預覽的場景 | |
| 文檔轉 HTML 預覽（推薦） | 兼容多文檔格式使用簡單 | 高度還原文檔樣式，適用於文檔格式復雜的場景 | |
| 自定義html預覽 | 兼容多文檔格式支持自定義功能 | 適用於有開發能力，需要高度定制化的預覽頁面/邏輯的場景 |
方案一：文檔轉圖片預覽
面對多元辦公場景，通過 COS 文檔預覽功能，可以暢通查閱不同類型的文檔。您可點擊下方鏈接，進行文檔轉圖片功能的快速接入：
方案二：文檔轉 html 預覽（推薦）
同樣三步接入：
- 將源文件上傳至 COS 存儲桶中，在源文件的詳情獲取對象地址，訪問對象地址可以下載源文件：
https://ci-h5-demo-1258125638.cos.ap-chengdu.myqcloud.com/defaults/defaultSlides.pptx
-
進入存儲桶的數據處理頁面，開啟文檔服務。
-
在對象地址后加入文檔轉html參數 ?ci-process=doc-preview&dstType=html 即可預覽：
https://ci-h5-demo-1258125638.cos.ap-chengdu.myqcloud.com/defaults/defaultSlides.pptx?ci-process=doc-preview&dstType=html
更多處理一：私有訪問
為保證數據安全，我們推薦存儲在 COS 上的文件都設置私有訪問權限。預覽私有文件時需要在請求參數中加上文檔簽名，注意簽名需要進行 urlencode。
https://ci-h5-demo-1258125638.cos.ap-chengdu.myqcloud.com/defaults/defaultSlides.pptx?ci-process=doc-preview&dstType=html&sign=urlencode(請求簽名)
更多處理二：文檔水印
為加強文檔可控性和可追溯性，我們提供了文檔水印功能，預覽文檔時添加水印參數即可實現自定義水印。
https://ci-h5-demo-1258125638.cos.ap-chengdu.myqcloud.com/defaults/defaultSlides.pptx?ci-process=doc-preview&dstType=html
&htmlwaterword=Q09T5paH5qGj6aKE6KeI // 水印內容：Base64.encode('COS文檔預覽')
&htmlfillstyle=cmdiYSgxOTIsMTkyLDE5MiwwLjYp // 水印顏色和透明度：Base64.encodeUrl('rgba(192,192,192,0.6)')
&htmlfront=Ym9sZCAxOHB4IFNlcmlm // 水印文字樣式：Base64.encodeUrl('bold 18px Serif')
&htmlrotate=320 // 旋轉角度：320度
&htmlhorizontal=100 // 水印的水平間距：100px
&htmlvertical=120 // 水印的垂直間距：120px
文檔水印效果
更多處理三：禁止復制
防止文檔內容被隨意截取，可以加入參數 ©able=0 開啟禁止復制功能。
https://ci-h5-demo-1258125638.file.myqcloud.com/defaults/defaultSlides.pptx?ci-process=doc-preview&dstType=html©able=0
如果你還想自定義預覽頁面 UI、通過接口操作翻頁/播放、攔截頁面上的跳轉鏈接等，我們也提供了下述方案。
方案三：自定義 html 預覽
文檔轉 html 的 JS SDK 提供了自定義界面顯示、控制頁面狀態、監聽回調事件等能力，以便於開發人員結合自己的業務來使用預覽功能。方案三實質上也是使用了一個配置好的 SDK 模板，對用戶隱藏了代碼配置，方便大多數場景下的快速使用。
下面是使用自定 html 預覽的交互流程：
SDK 提供了多種規范的包，滿足各種開發場景。
| 模塊化規范 | 下載 | 使用 |
|---|---|---|
| 非模塊化 | JS-SDK包 | 直接在html頁面引入js文件 |
| AMD | JS-SDK包 | 將js文件放到項目目錄下 |
SDK 支持界面定制、功能定制、事件監聽和高級操作四大功能，具體配置參考說明文檔。
五、客戶案例
騰訊樂享
騰訊樂享為教育、零售、制造、互聯網等泛行業提供了組織內部成員交流的一站式平台，服務了20W+企業客戶。基於 COS 自定義 html 預覽方案構建了完善的知識庫搭建、分享流程，讓用戶無需將文件下載到本地，即可通過多平台隨時訪問文檔文件內容，並在實現內部文檔公開化、透明化的同時，通過防復制功能，杜絕泄漏風險。更多信息點開下方鏈接查看👇
六、歡迎體驗
歡迎使用文檔預覽功能，您可通過下方鏈接或小程序，快速體驗 COS 的文檔預覽能力~功能體驗入口：https://cloud.tencent.com/act/pro/ciExhibition?tab=docPreview
— END —