当前位置: 首页 > Web前端 > vue.js

跨平台文档在线预览解决方案(五)——水印、防拷贝、在线编辑等

时间:2023-04-01 01:46:07 vue.js

1.前言最近有很多童鞋问我,“预览功能很好,要是能有就更完美了”支持水印。”这是自从我开发了基于腾讯X5的安卓原生插件(《跨平台文档在线预览解决方案(四))以来,听到的最普遍的心声。然而,不仅仅支持水印,还有回调返回总页数和当前页码,甚至还有在线编辑等功能。二、理想是美好的,现实是残酷的在文档预览技术领域中,经过2年的不断研究。从最近开始的pdf.js(将所有文档转换成pdf,然后前端通过pdf.js进行转换),到采用Microsoft Office Online离线预览,接着到OpenOffice、LibreOffice文档转换,最后到Android和IOS原生插件(参考系列文章《跨平台文档在线预览解决方案》)以来,一直在用云来解决不断增长的用户需求。目前,文档可以很好地预览。但是,如果遇到协同办公、在线编辑等复杂需求,之前的方案就显得力不从心了;甚至加个小水印,防止复制,都让移动端变得有些复杂。3、又一村,柳暗花明。现实虽然残酷,但也不会永远这样下去。一些Office厂商经过十年的努力和不断研究,终于在文档预览和文档编辑产品领域小有建树,如永中云服务平台、金山WPS开放平台、腾讯文档开放API等。这些平台将解决日益复杂的文档协作需求。今天我们就来看看永中云服务平台的文档业务能力。4、打开Yozocloud服务https://open.yozocloud.cn/——>注册、登录——>根据文档申请开发者——>打开管理中心申请申请(申请云预览、云剪辑、格式转换三个应用)。接下来笔者基于本人的开源项目uniapp-admin(项目地址:github、gitee)集成永中云服务。欢迎使用和Star~5.云预览根据云预览开发文档,分别使用上传文件和在线预览文件的界面。第一步:forkuniapp-admin(项目地址:github,gitee)第二步:配置云预览应用的appId和appKey(这只是前端案例,生产和推荐使用JAVASDK接口)隐藏关键)第三步:运行5.1业务流程先进入页面pages/yzcloud/index.vue(永中云服务标签入口)-->然后跳转到文件上传(pages/file/file-upload.vue)--->然后调用本地H5网页(hybrid/html/index.html)——>最后上传后跳转到预览页面(pages/yzcloud/yz-preview-callback.vue)5.2H5上传组件本项目使用H5上传网页(同时支持H5和APP跨平台),也可以参考开源项目uniapp-file-upload(项目地址:github,gitee)5.3效果预览docx预览pptx预览xlsx预览pdf配置数据回调接口,用于编辑自动保存后的回调。与云预览类似,先调用上传文件的接口-->再调用在线编辑文件的接口-->自动保存,调用回调接口。6.1效果编辑docx编辑xlsx编辑pptxVII.格式转换和云编辑一样,参考格式开发文档,先调用上传文件接口-->再post调用在线格式转换文件接口-->获取转换结果。7.1转换结果8.总结与开源框架技术相比,永中云服务可以很好地解决文档预览、水印、防拷贝、在线编辑等复杂需求,为协同办公领域带来福音。