跨平台文档在线预览解决方案（五）-水印、防复制、在线编辑等

一、前言

最近很多童鞋问我，“预览功能挺好的，要是支持水印就完美了”。这是我自从基于腾讯X5开发Android原生插件（《跨平台文档在线预览解决方案（四））以来，听到的最普遍的心声。然而，不仅仅支持水印，还有回调返回总页数和当前页码，甚至还有在线编辑等功能。

二、理想是美好的，现实是残酷的

在文档预览技术领域中，经过2年的不断研究。从最近开始的pdf.js（将所有文档转换成pdf，然后前端通过pdf.js进行转换），到采用Microsoft Office Online离线预览，接着到OpenOffice、LibreOffice文档转换，最后到Android和IOS原生插件（参考系列文章《跨平台文档在线预览解决方案》），都在利用云来解决不断增长的用户需求。目前，文档可以很好的预览了。但如果遭遇协同办公、在线编辑等复杂的需求，前面的方案显得力不从心；就连小小的添加水印，防复制都让移动端稍显复杂。

三、柳暗花明又一村

尽管现实是残酷的，但它不会永远继续下去。有一些Office厂商十年如一日的不断打拼，不断钻研，在文档预览、文档编辑产品领域，终小有成就，如永中云服务平台、金山WPS开放平台、腾讯文档开放API等，这些平台将解决日益复杂的文档协作需求。今天我们来看看永中云服务平台的文档业务能力。

四、永中云服务

打开 open.yozocloud.cn/ ——> 注册、登录 ——> 根据文档进行开发者申请 ——> 打开管理中心，进行应用申请（根据需求申请云预览、云编辑、格式转换三个应用）。

接下来，笔者基于本人的开源项目uniapp-admin（项目地址：github、gitee）集成永中云服务，欢迎使用和Star~

五、云预览

根据云预览开发文档，分别使用上传文件、在线预览文件接口。

• 第一步：fork uniapp-admin（项目地址：github、gitee）

• 第二步：配置云预览应用的appId和appKey（这里只是做前端的案例，建议生产采用JAVA SDK接口，隐藏密钥）

• 第三步：运行

5.1 业务流程

首先进入页面pages/yzcloud/index.vue（永中云服务tab入口）——> 然后跳转文档上传（pages/file/file-upload.vue）——> 接着，调用本地H5网页（hybrid/html/index.html）——> 最后，上传完成跳转预览页面（pages/yzcloud/yz-preview-callback.vue）

5.2 H5上传组件

本项目采用的是H5上传网页（同时支持H5和APP跨平台），也可以参考开源项目uniapp-file-upload（项目地址：github、gitee）

5.3 效果

• 预览docx

• 预览pptx

• 预览xlsx

• 预览pdf

六、云编辑

根据云编辑开发文档，应用申请审核通过后，配置数据回调接口，用于编辑自动保存后的回调。

和云预览类似，先调用上传文档接口——>然后调用在线编辑文件接口——>自动保存，调用回调接口。

6.1 效果

• 编辑docx

• 编辑xlsx

• 编辑pptx

七、格式转换

同理云编辑，参考格式化开发文档，先调用上传文档接口——>然后post调用格式在线转换文件接口——>获取转换结果。

7.1 转换结果

八、总结

相比开源的框架技术，永中云服务能很好的解决文档预览、添加水印、防止复制、在线编辑等复杂的需求，给协同办公领域带来了福音。