搭建vue并且实现360和谷歌浏览器对office(ntko)在线编辑工具的集成

一 ：搭建vue项目

1：第一步，需要安装node.js，

2：第二波，安装cnpm(国内淘宝镜像，方便后期依赖安装问题，减少不必要的依赖以及加快速度）执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org

3：cnpm安装脚手架vue-cli 在命令行中运行命令 cnpm install -g vue-cli 安装脚手架。

4：构建项目 自定义选择盘符，命令切换进去，执行命令vue init webpack javalsj-vue（最简单的helloword欢迎页面)

5：安装项目依赖，这个时候最好用国内镜像（cnpm install),所以第二部最好安装一下，很快

6：运行项目，这个需要用npm run dev

7:浏览器访问项目，项目运行成功后浏览器访问地址 http://localhost:8080 就可以查看效果啦。

搭建vue项目详细可以见（https://segmentfault.com/a/1190000013950461），

 

二：集成ntko

1：引入ntko的js和.cab文件，如下图，资源我有共享，在下面

2：在上面搭建的项目里面进行操作，可以在helloword，或者自己重新新建一个文件，在文档里面加入代码

<template>

<div>

<el-button type="primary" style="width: 100%" @click="open()">打开office插件</el-button>

<ntko v-if="ntko" :flag="ntko" @close="close()"></ntko>

</div>

</template>

 

<script>

import Ntko from './Ntko'

export default {

components:{Ntko},

data(){

return{

ntko:false

}

},

computed:{

 

},

methods:{

open(){

// 定义ntkoBrowser

let ntkoBrowser = require('./ntkobackground.min.js').ntkoBrowser

   let ntkoed = ntkoBrowser.ExtensionInstalled();

// 打开控件 这块在路由中配置对应的组件，如果部署tomcat，需要在Context中指定该路由的项目是该vue项目

   //alert(window.location.origin);

   if(!ntkoed){

    ntkoBrowser.openWindow(window.location.origin + "/ntko")

   }else{

     window.open("http://localhost:8080/ntko")

   }

// 注册回调方法

window.ntkoCloseEvent = function () {

alert("跨浏览器插件应用程序窗口已关闭!");

}

},

close(){

this.ntko = false

}

}

}

</script>

 

<style scoped>

 

</style>

3：新建一个Ntko.vue文件，写入代码

<template>

<div id="ntko">

 

</div>

</template>

 

<script>

export default {

name: "Ntko",

data(){

return{

//32位控件的classid

classid : "A64E3073-2016-4baf-A89D-FFE1FAA10EC0",

// classid : "A64E3073-2016-4baf-A89D-FFE1FAA10EE0",

//64位控件的calssid

classidx64 : "A64E3073-2016-4baf-A89D-FFE1FAA10EC0",

//32位控件包的路径

codebase:"officecontrol/OfficeControl.cab#version = 6.0.0.1",

//64位控件包的路径

codebase64 : "officecontrol/OfficeControlx64.cab#version=6,0,0,1",

//设置高度

height : "600px",

//设置宽度

width : "100%",

//买断授权密钥如果不是买断可以不用写

MakerCaption : "",

//买断授权密钥如果不是买断可以不用写

MakerKey : "",

//密钥

ProductCaption : "",

//密钥

ProductKey : "",

//解除时间密钥

NoExpireKey : ""

}

},

computed:{

title(){

return 'vue集成ntko示例' + '浏览器参数：' + this.platform + '-' + this.browser

},

platform(){

return window.navigator.platform;

},

browser(){

let userAgent = navigator.userAgent

let rMsie = /(msie\s|trident.*rv:)([\w.]+)/

let rFirefox = /(firefox)\/([\w.]+)/

let rOpera = /(opera).+version\/([\w.]+)/

let rChrome = /(chrome)\/([\w.]+)/

let rSafari = /version\/([\w.]+).*(safari)/

let browser

function uaMatch(ua) {

let match = rMsie.exec(ua);

if (match != null) {

return { browser : "IE", version : match[2] || "0" };

}

match = rFirefox.exec(ua);

if (match != null) {

return { browser : match[1] || "", version : match[2] || "0" };

}

match = rOpera.exec(ua);

if (match != null) {

return { browser : match[1] || "", version : match[2] || "0" };

}

match = rChrome.exec(ua);

if (match != null) {

return { browser : match[1] || "", version : match[2] || "0" };

}

match = rSafari.exec(ua);

if (match != null) {

return { browser : match[2] || "", version : match[1] || "0" };

}

if (match != null) {

return { browser : "", version : "0" };

}

}

let browserMatch = uaMatch(userAgent.toLowerCase());

if (browserMatch.browser) {

browser = browserMatch.browser;

}

return browser

}

},

methods:{

},

mounted() {

    //alert(this.browser);

this.$nextTick(()=>{

if (this.browser=="IE"){

if(window.navigator.platform=="Win32"){

let domStr = ""

domStr += '<!-- 用来产生编辑状态的ActiveX控件的JS脚本--> '

domStr += '<!-- 因为微软的ActiveX新机制，需要一个外部引入的js--> '

domStr += '<object id="TANGER_OCX" classid="clsid:'+this.classid+'" codebase="'+this.codebase+'" width="'+this.width+'" height="'+this.height+'"> '

domStr += '<param name="MakerCaption" value="'+this.MakerCaption+'"> '

domStr += '<param name="MakerKey" value="'+this.MakerKey+'"> '

domStr += '<param name="ProductCaption" value="'+this.ProductCaption+'"> '

domStr += '<param name="ProductKey" value="'+this.ProductKey+'"> '

domStr += '<param name="NoExpireKey" value="'+this.NoExpireKey+'"> '

domStr += '<param name="IsUseUTF8URL" value="-1"> '

domStr += '<param name="IsUseUTF8Data" value="-1"> '

domStr += '<param name="Caption" value="NTKO OFFICE文档控件示例演示 http://www.ntko.com"> '

domStr += '<SPAN STYLE="color:red">不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置。</SPAN> '

domStr += '</object>'

document.getElementById('ntko').innerHTML += domStr

}

if(window.navigator.platform=="Win64"){

let domStr = ""

domStr += '<!-- 用来产生编辑状态的ActiveX控件的JS脚本--> '

domStr += '<!-- 因为微软的ActiveX新机制，需要一个外部引入的js--> '

domStr += '<object id="TANGER_OCX" classid="clsid:\'+this.classidx64+\'" codebase="'+this.codebase64+'" width="'+this.width+'" height="'+this.height+'"> '

domStr += '<param name="MakerCaption" value="'+this.MakerCaption+'"> '

domStr += '<param name="MakerKey" value="'+this.MakerKey+'"> '

domStr += '<param name="ProductCaption" value="'+this.ProductCaption+'"> '

domStr += '<param name="ProductKey" value="'+this.ProductKey+'"> '

domStr += '<param name="NoExpireKey" value="'+this.NoExpireKey+'"> '

domStr += '<param name="IsUseUTF8URL" value="-1"> '

domStr += '<param name="IsUseUTF8Data" value="-1"> '

domStr += '<param name="Caption" value="NTKO OFFICE文档控件示例演示 http://www.ntko.com"> '

domStr += '<SPAN STYLE="color:red">不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置。</SPAN> '

domStr += '</object>'

document.getElementById('ntko').innerHTML += domStr

}

}

else if (this.browser=="firefox"){

let domStr = ""

domStr += '<object id="TANGER_OCX" type="application/ntko-plug" codebase="'+this.codebase+'" width="'+this.width+'" height="'+this.height+'" ForOnSaveToURL="ntkosavetourl" ForOndocumentopened="ntkoondocumentopened"'

domStr += 'ForOnpublishAshtmltourl="ntkopublishashtml"'

domStr += 'ForOnpublishAspdftourl="ntkopublishaspdf"'

domStr += 'ForOnSaveAsOtherFormatToUrl="ntkosaveasotherurl"'

domStr += '_MakerCaption="'+this.MakerCaption+'" '

domStr += '_MakerKey="'+this.MakerKey+'" '

domStr += '_ProductCaption="'+this.ProductCaption+'" '

domStr += '_ProductKey="'+this.ProductKey+'" '

domStr += '_NoExpireKey="'+this.NoExpireKey+'" '

domStr += 'clsid="{'+this.classid+'}" >'

domStr += '<SPAN STYLE="color:red">尚未安装NTKO Web FireFox跨浏览器插件</SPAN> '

domStr += '</object> '

document.getElementById('ntko').innerHTML += domStr

}else if(this.browser=="chrome"){

 

let domStr = ""

domStr += '<object id="TANGER_OCX" clsid="{'+this.classid+'}" ForOnSaveToURL="ntkosavetourl" ForOndocumentopened="ntkoondocumentopened"'

domStr += 'ForOnpublishAshtmltourl="ntkopublishashtml"'

domStr += 'ForOnpublishAspdftourl="ntkopublishaspdf"'

domStr += 'ForOnSaveAsOtherFormatToUrl="ntkosaveasotherurl"'

domStr += '_IsUseUTF8URL="-1" '

domStr += '_IsUseUTF8Data="-1" '

domStr += '_MakerCaption="'+this.MakerCaption+'" '

domStr += '_MakerKey="'+this.MakerKey+'" '

domStr += '_ProductCaption="'+this.ProductCaption+'" '

domStr += '_NoExpireKey="'+this.NoExpireKey+'" '

domStr += '_ProductKey="'+this.ProductKey+'" '

domStr += 'codebase="'+this.codebase+'" width="'+this.width+'" height="'+this.height+'" type="application/ntko-plug" '

domStr += '<SPAN STYLE="color:red">尚未安装NTKO Web Chrome跨浏览器插件</SPAN> '

domStr += '</object>'

document.getElementById('ntko').innerHTML += domStr

}else{

alert("暂不支持其他浏览器");

}

        var obj = document.getElementById("TANGER_OCX");

        obj.CreateNew("Word.Document");

 

})

}

 

}

</script>

 

<style>

/*全局覆盖样式，注意在其他地方不要定义ntko-demo这个样式*/

/*.ntko-demo .el-dialog__body{*/

/*padding: 0 0 0 0 !important;*/

/*}*/

</style>

4：在路由里面加入ntko的路径