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

 

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue和Spring Boot是目前非常流行的前后端开发框架,可以用于开发各种Web应用。而PageOffice则是一款专业的Office文档在线编辑工具,支持多种格式的文档编辑,包括Word、Excel、PPT等。 要实现Vue和Spring Boot集成PageOffice实现在线编辑Word功能,可以按照以下步骤进行: 1. 创建Vue项目并引入PageOffice插件:首先使用Vue CLI创建一个新的Vue项目,然后在项目中引入PageOffice插件,可以通过npm安装或直接在HTML中引入PageOffice的脚本文件。 2. 集成Spring Boot:创建一个Spring Boot项目,使用Maven或Gradle配置相关依赖,并设置好后端的路由和接口。 3. 后端接口:在Spring Boot项目中编写后端接口,用于接收前端传递的Word文档数据以及编辑保存的功能。可以使用Spring MVC来处理路由和参数解析,然后将文档数据传递给PageOffice进行编辑。 4. 前端页面:在Vue项目中创建一个用于展示和编辑Word文档的前端页面。通过Vue的组件方式,引入PageOffice并使用其提供的API,在页面上展示Word文档并提供编辑功能。 5. 数据传输和保存:在前后端通过HTTP接口进行数据的传输,前端将编辑保存的文档数据发送到后端,后端将数据保存到数据库或文件系统中。 6. 页面展示:将编辑保存的文档从数据库或文件系统中取出,并在前端页面上进行展示,用户可以随时加载、编辑和保存文档。 综上所述,使用Vue和Spring Boot集成PageOffice进行在线编辑Word,需要前后端的配合,前端负责页面展示和编辑功能,后端负责接口的处理和数据的保存。这样就能够实现一个功能完善的在线编辑Word的应用。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值