终于把weboffice控件集合到项目中,在此记录下使用过程中遇到的坑。
项目情况
公司有个项目需要使用到在线文档编辑器,之前是采用免费的NTKO控件,但是该控件不能兼容所有浏览器,只能在IE浏览器上使用。为什么只能在IE上使用在线文档编辑器呢,因为微软的office的插件只支持IE。
那市面上有没有跨浏览器使用的文档编辑器呢?
目前尚无免费的跨浏览器office文档控件。而收费的有款PageOffice,但是在实际使用时,与直接开启office编辑工具相比,功能上还存在较大差异。
使用WebOffice
weboffice可以实现跨浏览器编辑office文档,它是一种系统级控件相当于在系统上安装了相应的软件,然后在浏览器上进行调用,这就意味着需要跳出当前浏览器而调用软件自己的浏览器。而上面提到的其它控件是浏览器控件,直接嵌入到浏览器中,可以做到无缝使用。
碰到的问题
1、跳出浏览器意味着就不能实现session共享。
需要通过session传值的解决办法:
当用户使用智能窗打开系统内页时,SESSION值如何传递的问题:
WebOffice使用URL TOKEN解决方案:
1)、当用户登陆系统时,记下用户的帐号名称和登陆时间存入数据库两个字段,关将帐号名和登陆时间统一成字符串后进行MD5加密产生一个密码串 并根据需要把要用的SESSIN值存入数据库相应字段里。
2)、在打开智能窗时把账号名和MD5加密串分别用URL参数如 http://www.aa.com/aa.jsp?fileid=1&user=账号名&token=MD5加密串, 进行传递
3)、在aa.jsp通过获得的账号名,找到库里存储的此账号最近一次登陆的时间,通过前面登陆时使用的加密算法对账号和从库里取出的时间进行MD5加密,得出一个新的加密字符串,如果此加密字符串与网址里 aa.jsp?fileid=1&user=账号名&token=MD5加密串 里token参数的值一至,则一定是同一个人操作,接下来再到库中把对应的SESSION值读取出来就可以了。
验证通过!
2、无法获得父窗口相应的属性。比如:在保存文档结束之后,父窗口不知道该操作结束,无法做出相应的更新。
解决办法:第一次操作时记录下相应状态并启动js轮询,保存后更改状态。当父窗口的js轮询返回对应的状态后,父页面进行相应更新,最后销毁该轮询。(本来是想采用websocket的,但好像部分浏览器暂时不支持html5)
3、自定义弹出窗口无法限制在文档之上。
解决办法:百度了div如何显示在ocx之上。
例子:
<center>
<div id=divinfo style="visibility:hidden">
<iframe style="position:absolute;top:50px;left:200px;background-color:transparent;" id=webifrm src="about:blank" width="1000px" height="350px" scrolling="no" frameborder="0"></iframe>
<div style="position:absolute;top:50px;left:200px;border:0px solid transparent;">
<div class="easyui-panel" style="margin:-10px 0px 0px -10px">
<div id="p" class="easyui-panel" title="插入标签" style="width:1000px;height:350px;margin:0px;"
data-options="collapsible:false,minimizable:false,maximizable:false,closable:false,tools:[{
iconCls:'icon-clear',handler:closeBqPanel
}]">
<form id="wsmbbqForm" method="post" class="form-horizontal">
分类代码: <input id="txt_fldm" name="txt_fldm" size="30" class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'${(appName)!}/common/dict?fldm=SSTJ_W91'"/>
标签名称: <input id="txt_bqmc" class="easyui-textbox" style="width:200px">
<button type="button" class="btn button-primary easyui-linkbutton" iconCls="icon-search" onclick="funSearchBq()">查询</button>
<button type="reset" class="btn button-warning easyui-linkbutton" iconCls="icon-reload" onclick="$('#wsmbbqForm').form('clear');">重置</button>
</form>
<div id="bqGrid" class="easyui-panel" style="width:100%;padding:10px">
</div>
</div>
</div>
</div>
</div>
</center>