秒级接入、效果满分的文档预览方案——COS文档预览

云存储小天使

一、导语

说起 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 文档预览功能,可以畅通查阅不同类型的文档。您可点击下方链接,进行文档转图片功能的快速接入:

一文带你玩转对象存储 COS 文档预览

方案二:文档转 html 预览(推荐)

同样三步接入:

  1. 将源文件上传至 COS 存储桶中,在源文件的详情获取对象地址,访问对象地址可以下载源文件:
https://ci-h5-demo-1258125638.cos.ap-chengdu.myqcloud.com/defaults/defaultSlides.pptx
  1. 进入存储桶的数据处理页面,开启文档服务。
  1. 在对象地址后加入文档转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


文档水印效果

更多处理三:禁止复制

防止文档内容被随意截取,可以加入参数 &copyable=0 开启禁止复制功能。

https://ci-h5-demo-1258125638.file.myqcloud.com/defaults/defaultSlides.pptx?ci-process=doc-preview&dstType=html&copyable=0

如果你还想自定义预览页面 UI、通过接口操作翻页/播放、拦截页面上的跳转链接等,我们也提供了下述方案。

方案三:自定义 html 预览

文档转 html 的 JS SDK 提供了自定义界面显示、控制页面状态、监听回调事件等能力,以便于开发人员结合自己的业务来使用预览功能。方案三实质上也是使用了一个配置好的 SDK 模板,对用户隐藏了代码配置,方便大多数场景下的快速使用。

下面是使用自定 html 预览的交互流程:

SDK 提供了多种规范的包,满足各种开发场景。

模块化规范下载使用
非模块化JS-SDK包直接在html页面引入js文件
AMDJS-SDK包将js文件放到项目目录下

SDK 支持界面定制、功能定制、事件监听和高级操作四大功能,具体配置参考说明文档。

五、客户案例

腾讯乐享

腾讯乐享为教育、零售、制造、互联网等泛行业提供了组织内部成员交流的一站式平台,服务了20W+企业客户。基于 COS 自定义 html 预览方案构建了完善的知识库搭建、分享流程,让用户无需将文件下载到本地,即可通过多平台随时访问文档文件内容,并在实现内部文档公开化、透明化的同时,通过防复制功能,杜绝泄漏风险。更多信息点开下方链接查看👇

口袋里有个“知识库”,是什么样的体验?

六、欢迎体验

欢迎使用文档预览功能,您可通过下方链接或小程序,快速体验 COS 的文档预览能力~功能体验入口:https://cloud.tencent.com/act...

— END —

阅读 143

为大家分享更多的云存储技术实战内容!

4 声望
2 粉丝
0 条评论
你知道吗?

为大家分享更多的云存储技术实战内容!

4 声望
2 粉丝
文章目录
宣传栏