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

￡神魔★判官ぃ 2022-11-07 05:24 361阅读 0赞

## 一、前言 ##

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

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

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

## 三、柳暗花明又一村 ##

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

## 四、永中云服务 ##

打开 https://open.yozocloud.cn/ ——> 注册、登录 ——> 根据[文档][Link 3]进行开发者申请 ——> 打开[管理中心][Link 4]，进行应用申请（根据需求申请云预览、云编辑、格式转换三个应用）。  
![永中云服务][9d29ac5feac7e8ddf19443b0f4a068fe.png]  
![应用申请][0df6958643916e68e30491a591e31c8b.png]

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

## 五、云预览 ##

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

*  **第一步**：fork uniapp-admin（项目地址：[github][]、[gitee][]）
 *  **第二步**：配置云预览应用的**appId**和**appKey**（这里只是做前端的案例，建议生产采用JAVA SDK接口，隐藏密钥）  
    ![dde3df1305cabf96207dca16a4afea46.png][]
 *  **第三步**：运行

### 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][github 1]、[gitee][gitee 1]）

### 5.3 效果 ###

*  预览docx

![6a5769a2149c4c00b418281b70288a27_tplv-k3u1fbpfcp-watermark.image][]

*  预览pptx

![04253a728ebb49f498656411879f0a06_tplv-k3u1fbpfcp-watermark.image][]

*  预览xlsx

![8c488c75f3424890a1286ae61250b6d1_tplv-k3u1fbpfcp-watermark.image][]

*  预览pdf

![31c662bd279843e8853ddec4e917ad95_tplv-k3u1fbpfcp-watermark.image][]

## 六、云编辑 ##

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

![88603e36306c4e92a4cc24c93071a73f_tplv-k3u1fbpfcp-watermark.image][]

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

### 6.1 效果 ###

*  编辑docx

![2eb1915fb151434bac4d75104dfa1036_tplv-k3u1fbpfcp-watermark.image][]

*  编辑xlsx

![fbe5570cec094559b9bf44777927ea36_tplv-k3u1fbpfcp-watermark.image][]

*  编辑pptx

![5f2aee2ad61a46ffa69c8a7f45037f66_tplv-k3u1fbpfcp-watermark.image][]

## 七、格式转换 ##

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

### 7.1 转换结果 ###

![fb56cb0ae1f648c7abda04466ee0d7bf_tplv-k3u1fbpfcp-watermark.image][]

## 八、总结 ##

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

[Link 1]: http://silianpan.cn/index.php/2020/10/17/file_preview_uni_native/
[Link 2]: https://open.yozocloud.cn/home
[WPS]: https://open.wps.cn/
[API]: https://docs.qq.com/home/open
[Link 3]: https://open.yozocloud.cn/document/quickStart
[Link 4]: https://open.yozocloud.cn/developers/home
[9d29ac5feac7e8ddf19443b0f4a068fe.png]: /images/20221023/9e18337596314cfd905acba1d3a743bf.png
[0df6958643916e68e30491a591e31c8b.png]: /images/20221023/7aec4b6111da427ca139045df6f57ea7.png
[github]: https://github.com/silianpan/uniapp-admin
[gitee]: https://gitee.com/twofloor/uniapp-admin
[Link 5]: https://open.yozocloud.cn/document/preview
[dde3df1305cabf96207dca16a4afea46.png]: /images/20221023/210790bfb94540a8b26ee42aea3cb96e.png
[github 1]: https://github.com/silianpan/uniapp-file-upload
[gitee 1]: https://gitee.com/twofloor/uniapp-file-upload
[6a5769a2149c4c00b418281b70288a27_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/073dbcd0ec274a808cb1d1ee971aaff7.png
[04253a728ebb49f498656411879f0a06_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/8acc87ec80c7486b8312c8b6b186d604.png
[8c488c75f3424890a1286ae61250b6d1_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/e279fff3c9904093b0b89dee81872152.png
[31c662bd279843e8853ddec4e917ad95_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/b4710587ac474c3a82d0ed1d70ae5dda.png
[Link 6]: https://open.yozocloud.cn/document/compile
[88603e36306c4e92a4cc24c93071a73f_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/594f7d6822a24bb897eec9fb938d807f.png
[2eb1915fb151434bac4d75104dfa1036_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/3a843181a49042398c805bcc1beca920.png
[fbe5570cec094559b9bf44777927ea36_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/f8d8eea3782c482fbebe33b11a392ecd.png
[5f2aee2ad61a46ffa69c8a7f45037f66_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/d2a21876479f4f3c8cc82993a5bae096.png
[Link 7]: https://open.yozocloud.cn/document/convert
[fb56cb0ae1f648c7abda04466ee0d7bf_tplv-k3u1fbpfcp-watermark.image]: /images/20221023/205459cd6ccf498b93464de57655057d.png