一 :搭建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的路径