搭建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，或者自己重新新建一个文件，在文档里面加入代码

<div>

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

</div>

</template>

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>

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

</div>

</template>

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 += ' '

domStr += ' '

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 += ' '

domStr += ' '

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

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

Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档
前言一直想用uniapp开发个在线多人编辑Excel文档的APP,苦于一直没找到免费的开源库,今天心血来潮,和大神聊起知道有luckysheet这么个免费的东东,看了文档,还挺合适.立即撸起.虽说是 ...
vue中使用Luckysheet实现Excel的导入、在线编辑、导出等功能
一.准备阶段 1.在pubilic文件夹下的index.html文件中的head标签中引入Luckysheet的cdn文件 <link rel='stylesheet' href='https: ...
9102年webpack4搭建vue项目
前言首先祝大家元宵节快乐,最近已经好久没有写过文章了,刚好趁着这几天刚刚上班,领导还没有来,偷偷的写一篇关于webpack搭建vue的博客.因为公司使用vue比较多,构建vue项目使用vue-cli ...
Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架. 二.vue-cli安装.更新安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目
windows搭建vue项目看这篇
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
利用官方的vue-cli脚手架来搭建Vue集成开发环境
在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...

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

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

最新文章

热门文章