Feel no regret for this life.

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

Vue silianpan 92℃ 0评论

一、前言

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

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

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

三、柳暗花明又一村

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

四、永中云服务

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

接下来,笔者基于本人的开源项目uniapp-admin(项目地址:githubgitee)集成永中云服务,欢迎使用和Star~

五、云预览

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

  • 第一步:fork uniapp-admin(项目地址:githubgitee

  • 第二步:配置云预览应用的appIdappKey(这里只是做前端的案例,建议生产采用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(项目地址:githubgitee

5.3 效果

  • 预览docx

  • 预览pptx

  • 预览xlsx

  • 预览pdf

六、云编辑

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

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

6.1 效果

  • 编辑docx

  • 编辑xlsx

  • 编辑pptx

七、格式转换

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

7.1 转换结果

八、总结

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

转载请注明:我的技术分享 » 跨平台文档在线预览解决方案(五)-水印、防复制、在线编辑等

喜欢 (2)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址