vue对于ntko的应用经验
本来生活过的美滋滋,突然告知要用ntko写一个操作word文档的界面,看到后立马提起兴致看了下ntko的基本文档,安装ntko,研究小demo。研究完后心里立刻妈卖批了,这个ntko居然限制游览器与word版本,可把我研究苦了。chrome45后就限制了插件入口,firfox跟chrome差不多,所以只能用一些特定的进行开发。
1.开发环境
选择使用的是 IE11,word2016(QQ游览器与360游览器拥有ie11的内核也可以使用,注意不要使用chrome的开发者工具)
ie11注意查看文档需要进行安全站点的检查,不然ActiveWindow获取不到,以下是设置方式图
把需要使用的ntko进行添加到信任站点才能正常使用。
2.单页面的ntko嵌入到vue项目中去
ntko嵌入到vue项目里可真是让人头秃呀,ie游览器加这个控件真的法力无边,彻底把我打磨成一个特别有耐心与好脾气的人。我们接下来说明可能出现的问题。
(1).ntko的demo使用的是script进行插入与监控,vue中的根本就识别不了script
通过$(’#id’).apend(script)进行插入,注意ntkoofficecontrol.min.js文件中的
if (browser=="IE"){if(window.navigator.platform=="Win32"){document.write('<!-- 用来产生编辑状态的ActiveX控件的JS脚本--> ');document.write('<!-- 因为微软的ActiveX新机制,需要一个外部引入的js--> ');document.write('<object id="TANGER_OCX" classid="clsid:'+classid+'"');document.write('codebase="'+codebase+'" width="'+width+'" height="'+height+'"> '); document.write('<param name="MakerCaption" value="'+MakerCaption+'"> ');document.write('<param name="MakerKey" value="'+MakerKey+'"> ');document.write('<param name="ProductCaption" value="'+ProductCaption+'"> ');document.write('<param name="ProductKey" value="'+ProductKey+'"> '); document.write('<param name="NoExpireKey" value="'+NoExpireKey+'"> '); document.write('<param name="IsUseUTF8URL" value="-1"> ');document.write('<param name="IsUseUTF8Data" value="-1"> ');document.write('<param name="Caption" value="NTKO OFFICE文档控件示例演示 http://www.ntko.com"> ');document.write('<SPAN STYLE="color:red">不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置。</SPAN> ');document.write('</object>'); }if(window.navigator.platform=="Win64"){document.write('<!-- 用来产生编辑状态的ActiveX控件的JS脚本--> ');document.write('<!-- 因为微软的ActiveX新机制,需要一个外部引入的js--> ');document.write('<object id="TANGER_OCX" classid="clsid:'+classidx64+'"');document.write('codebase="'+codebase64+'" width="'+width+'" height="'+height+'"> ');document.write('<param name="MakerCaption" value="'+MakerCaption+'"> ');document.write('<param name="MakerKey" value="'+MakerKey+'"> ');document.write('<param name="ProductCaption" value="'+ProductCaption+'"> ');document.write('<param name="ProductKey" value="'+ProductKey+'"> ');document.write('<param name="NoExpireKey" value="'+NoExpireKey+'"> '); document.write('<param name="IsUseUTF8URL" value="-1"> ');document.write('<param name="IsUseUTF8Data" value="-1"> ');document.write('<param name="Caption" value="NTKO OFFICE文档控件示例演示 http://www.ntko.com"> ');document.write('<SPAN STYLE="color:red">不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置。</SPAN> ');document.write('</object>'); }
}
else if (browser=="firefox"){ document.write('<object id="TANGER_OCX" type="application/ntko-plug" codebase="'+codebase+'" width="'+width+'" height="'+height+'" ForOnSaveToURL="ntkosavetourl" ForOndocumentopened="ntkoondocumentopened"'); document.write('ForOnpublishAshtmltourl="ntkopublishashtml"');document.write('ForOnpublishAspdftourl="ntkopublishaspdf"');document.write('ForOnSaveAsOtherFormatToUrl="ntkosaveasotherurl"'); document.write('_MakerCaption="'+MakerCaption+'" ');document.write('_MakerKey="'+MakerKey+'" ');document.write('_ProductCaption="'+ProductCaption+'" ');document.write('_ProductKey="'+ProductKey+'" '); document.write('_NoExpireKey="'+NoExpireKey+'" '); document.write('clsid="{'+classid+'}" >');document.write('<SPAN STYLE="color:red">尚未安装NTKO Web FireFox跨浏览器插件</SPAN> ');document.write('</object> ');
}else if(browser=="chrome"){document.write('<object id="TANGER_OCX" clsid="{'+classid+'}" ForOnSaveToURL="ntkosavetourl" ForOndocumentopened="ntkoondocumentopened"');document.write('ForOnpublishAshtmltourl="ntkopublishashtml"');document.write('ForOnpublishAspdftourl="ntkopublishaspdf"');document.write('ForOnSaveAsOtherFormatToUrl="ntkosaveasotherurl"');document.write('_IsUseUTF8URL="-1" ');document.write('_IsUseUTF8Data="-1" ');document.write('_MakerCaption="'+MakerCaption+'" ');document.write('_MakerKey="'+MakerKey+'" ');document.write('_ProductCaption="'+ProductCaption+'" ');document.write('_NoExpireKey="'+NoExpireKey+'" ');document.write('_ProductKey="'+ProductKey+'" '); document.write('codebase="'+codebase+'" width="'+width+'" height="'+height+'" type="application/ntko-plug" ');document.write('<SPAN STYLE="color:red">尚未安装NTKO Web Chrome跨浏览器插件</SPAN> ');document.write('</object>');}else if (Sys.opera){alert("sorry,ntko web印章暂时不支持opera!");}else if (Sys.safari){alert("sorry,ntko web印章暂时不支持safari!");}
以上代码才是真正对于word显示器的展示的控件,script只是一个引用。所以直接把ntkoofficecontrol.min.js中的代码直接写成一个函数运行就可以了,我想过在main.js使用Import+Vue.use来运行代码,发现没有效果,因为项目比较急,没有尝试,后面会进行尝试修改。
因此vue项目里面如果想把控件放入到特定的位置,需要使用以下代码(伪码)
str = '<!-- 用来产生编辑状态的ActiveX控件的JS脚本--> ' +'<!-- 因为微软的ActiveX新机制,需要一个外部引入的js--> '+'<object id="TANGER_OCX" classid="clsid:'+classid+'"')+'codebase="'+codebase+'" width="'+width+'" height="'+height+'"> ' + '<param name="MakerCaption" value="'+MakerCaption+'"> '+'<param name="MakerKey" value="'+MakerKey+'"> ' +'<param name="ProductCaption" value="'+ProductCaption+'"> ' +'<param name="ProductKey" value="'+ProductKey+'"> ' + '<param name="NoExpireKey" value="'+NoExpireKey+'"> ' + '<param name="IsUseUTF8URL" value="-1"> ' +'<param name="IsUseUTF8Data" value="-1"> ' +'<param name="Caption" value="NTKO OFFICE文档控件示例演示 http://www.ntko.com"> '+'<SPAN STYLE="color:red">不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置。</SPAN> ' +'</object>'); document.getElementById('container').innerHTML = str;
上述代码就是把word展示器展示到id为container的控件里面。
2.相关文档的触发事件
ntko有个很坑的点是所有事件触发都是在
<script event="OnDocActivated(isActivated)" for="TANGER_OCX">document.getElementById('aaaaa').onD(isActivated);
</script>
在Vue项目中进行定义onD属性
export default({mounted(){document.getElementById('aaaaa').onD = function(){}}
})
这样算是完成了事件的传递工作,还有一个坑就是OnDocActivated不执行完毕好像没有ActiveWindow这个属性,所以当时利用了一个定时器延迟执行。
总结
这个ntko的项目写的人挺绝望的,IE游览器用的让人绝望,ntko每次加载还会出现页面卡顿的情况,开发时间大多数是用在等待IE游览器运行,挺考验人的耐心的。
vue对于ntko的应用经验相关推荐
- Vue最佳实践(项目经验总结,定期更新)
Vue $set添向数组添加元素 $set(target, key, value) 代码 addTimeNode () {this.$set(this.dynamicForm.timeNodes, t ...
- Vue.js开发移动端经验总结
作者:阡ゼ陌 https://blog.csdn.net/weixin_44705688/article/details/103961664 移动端适配 相对于PC端来说,移动端设备分辨率百花齐放,千 ...
- Vue.js 开发移动端经验总结
作者:阡ゼ陌 https://blog.csdn.net/weixin_44705688/article/details/103961664 移动端适配 相对于PC端来说,移动端设备分辨率百花齐放,千 ...
- Vue.js 实战总结
收录待用,修改转载已取得腾讯云授权 最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大 ...
- 「前端架构」React,Angular还是Vue,太难选了?看完秒懂。
我们必须承认,我们在这些框架方面有着极不平等的经验.然而,我们将尽量保持公正,并弄清楚React何时可能不是最佳选择,但首先,简短介绍: React是Facebook维护的最流行的框架.所有的酷孩子, ...
- vue源码(八)揭开数据响应系统的面纱
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://h ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- 20 年软件工程师的经验
软件工程师在做设计的时候,一定要有设计的思维,码农如果只是砌砖的,那么他的可替代性和技能能力并不高.前段时间看到一个设计师傅,在很狭小的空间内设计了非常非常不错的室内设计,利用了每一个可以利用的地方. ...
- vue制作3*3拼图
自从上次发布了vue制作抓娃娃机经验之后,好多朋友来私信我让我多分享一些小游戏的经验.(看来友友们对这种小游戏还是挺感兴趣哦捂脸笑) 好了,回归正题.今天给大家带来一个比较简单的小游戏--拼图.想必大 ...
- 基于Vue2.x的小米商城移动端项目
初学vue已经有一段时间,为了检验自己的学习成果,决定做一个项目作为一个阶段性总结,项目花了差不多半个月时间,目前实现了7个页面,商城的主要功能基本实现,代码已经放到github上面. 这个项目把大部 ...
最新文章
- MS:中山大学丁涛/吴忠道-肠道菌群调控血吸虫病传播媒介光滑双脐螺适生性的新机制...
- 互联网体系结构(网络基础).教案
- 方德系统装exe文件_CAXA CAD与国产操作系统全面适配
- 笔记-信息系统安全管理-信息安全保障系统
- react 按照一级路由 分包加载
- matlab运行支持向量机不出f,求助各位大神关于libsvm,svmpredict总是出不来结果,调试了好久还是不行...
- string拆分为int_拆分为流
- 【4.0】jdbcTemplate
- 手写tomcat socket closed_【消费电子】:重在阅读,新增手写 BOOX Nova Pro 体验评测...
- Jenkins进阶系列之——07更改Jenkins的主目录
- 通过docker-composer启动容器nginx,并完成spring.boot的web站点端口转发
- 数据库CDC中间件学习之Maxwell
- <数据结构> 顺序表
- 毕设教程系列 - FCM模糊聚类算法
- CNKI E-Study与Endnote 的参考文献题录互导
- ewebeditor网页文本编辑器、图片回显、弹窗自动关闭并刷新父页面
- 广西搬迁贫困人口近70万 “土瑶”深度贫困地区脱贫显成效
- 【哈工大SCIR笔记】机器阅读理解简述
- Mybatis系列2:模板模式在Mybatis中的执行器中的应用
- vue组件及生命周期