突破浏览器限制,实现前端嵌入WORD编辑浏览

近日接到一个外包系统,使用springBoot、vue各进行后端管理系统及前端开发.其中一个需求是要在各浏览器实现WORD编辑并存储于后台文件服务器中。

由于是要求支持各种浏览器,只简单的利用ACTIVEX插件技术是不能满足现实需求的。

第一时间就是看看有没有商业类的插件,发现有几个:weboffice,iWebOffice,pageOffice。

其中pageOffice使用者较多,推荐者也比较多,于是下了测试版,前后台设置使用果然不错。但是由于预算问题,客户无法再上报这个费用。测试版其提示信息又过于明显。

然后分别使用了weboffice及类似的系统,都存在费用问题。

还有另一种方式是使用openoffice ,onlyoffice、微软的online docment server,这几种为了一个预览,后台要新开一个端口不说,还得安装一堆其它控件,在线预览、编辑实现方式还非常复杂。我的天啊。。

春节闲着也是闲着,不如自己想办法做做了。

 

以下是我实现的步骤:

1:下载并注册微软免费的dsoframer.ocx控件。

注意这个控件要使用2.3.0.0版的,其它版本要么不支持高版本office,要么不能远程存储。这个痛苦啊,我耗费了近四个小时看源码.....

dsoframer到底也是个ActiveX插件,注册后也只能支持IE.

其实国内现有收费的商业控件,都是基于这个控件改的。

2:借助其它编程语言,实现word编辑显示。

这个语言可以是多种,但必须是 窗口程序。

实现方式一是引用dsofrmer控件,设置其相关属性,在运行时加载远程文档。

第二种是浏览器调用html的方式。如果是C#,嵌入的WebBrower执行的时候会提示控件没有签名的问题,这就需要实现自签名。最后我用了DELPHI2010来实现,它的WebBrower内嵌的是旧版IE。如果是DELPHIXE新版,也可能存在签名问题.

我分别实现了两种,调用上效果都差不多。但为了实现可控性更强、更美观的UI,建议还是用第二种。最后我定型也是第二种。

窗口程序的参数传递:各种语言取参数方式有差异,参数值都是一个字符串,按需求自行分拆这个字符串。

 

3:利用Http自定义Protocol实现弹窗显示

编写对应的注册批处理,将第二步生成的exe程序注册进系统注册表。

在前端调用时,原来的地址前面写上这个协议名称即可完成。

第1步和第3步我实现的批处理类似如下(请注意64位和32位操作系统的目录区别)

if exist %systemroot%\syswow64\dsoFramer.OCX del %systemroot%\syswow64\dsoFramer.ocx  /f /q
COPY %~sdp0\dsoFramer.ocx %systemroot%\syswow64
%systemroot%\syswow64\regsvr32.exe -u -s %systemroot%\syswow64\dsoFramer.OCX 
%systemroot%\syswow64\regsvr32.exe -s %systemroot%\syswow64\dsoFramer.OCX
SET "exepath=%~sdp0"
reg add "HKEY_CLASSES_ROOT\yuncailian" /v "" /d "yuncailianOfficceProtocol" /t REG_SZ /f 
reg add "HKEY_CLASSES_ROOT\yuncailian" /v "URL Protocol" /d  "%exepath%yuncailian.exe" /t REG_SZ /f
reg add "HKEY_CLASSES_ROOT\yuncailian\DefaultIcon" /v "" /d "%exepath%yuncailian.exe,1" /t REG_SZ /f
reg add "HKEY_CLASSES_ROOT\yuncailian\shell\open\command" /v "" /d "\"%exepath%yuncailian.exe\",\"%%1\"" /t REG_SZ /f 

4:实现更多功能

在dsoframer公开暴露的方法中,有个ActiveDocment,使用这个即可实现留痕等处理。

 

测试时发现直接用docment.getElementById('weboffice').PrintPreview()会提示方法出错,查看原型也确实也有这个方法,最后使用ActiveDocment的打印方式解决。

 

经过IE新旧版、Google Chrome、firefox等多种内核浏览器,均正常编辑存储实现各种功能.

 

 

 

作者联系:

微信:18990713120

 

 

 

 

你可能感兴趣的:(office,vue.js,前端)