突破浏览器限制，实现前端嵌入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