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遊覽器運行，挺考驗人的耐心的。