金格WebOffice2015

您所在的位置：网站首页 › 该插件不受支持解决方案 › 金格WebOffice2015

金格WebOffice2015

2024-06-12 14:49| 来源: 网络整理| 查看: 265

金格WebOffice2015-----vue项目原创

咏之随笔 2022-02-27 10:25:40 ©著作权

文章标签 vue WebOffice2015 在线预览 html chrome 文章分类代码人生

©著作权归作者所有：来自51CTO博客作者咏之随笔的原创作品，请联系作者获取转载授权，否则将追究法律责任

下载

官网地址：http://www.goldgrid.com/jinge_download/index.aspx?num=5

金格WebOffice2015-----vue项目_vue

解压后的文件

js文件中有两个重要的js文件iWebOffice2015.js和WebOffice.jsWebOffice.js是WebOffice2015对象的一些方法。iWebOffice2015.js是根据不同的浏览器环境来渲染金格WebOffice2015-----vue项目_html_03

安装插件安装iWebOfiice2015.msi 金格WebOffice2015-----vue项目_vue_04

实现将iWebOffice2015.js和WebOffice.js放入static目录下

金格WebOffice2015-----vue项目_chrome_05

index.html中引入WebOffice.js

金格WebOffice2015-----vue项目_vue_06

修改iWebOffice2015.js 官网iWebOffice2015.js源文件在下面截图处少了一个闭合标签，如下图添加金格WebOffice2015-----vue项目_chrome_07

由于异步加载不允许使用document.write方法，这里注释掉document.write(str) 金格WebOffice2015-----vue项目_html_08

【可选操作】，注释浏览器判断，这里由于未写入文档流，所以获取一些属性是出错的，如document.getElementById("WebOffice").type，注释掉就可以/*注释以下代码*//*if ((window.ActiveXObject != undefined) || (window.ActiveXObject != null) || "ActiveXObject" in window) {} else { if (browser == "firefox") { if(version < "52"){ var fireFoxType = navigator.mimeTypes["application/kg-activex"]; if (fireFoxType == undefined) { document.getElementById("WebOffice").width = "1px"; var str='该插件不受支持点击跳转解决方案'; var t = document.getElementById("OfficeDiv"); t.innerHTML = t.innerText + str; } }else{ document.getElementById("WebOffice").width = "1px"; var str='该插件不受支持请更换52版本以下的FireFox浏览器'; var t = document.getElementById("OfficeDiv"); t.innerHTML = t.innerText + str; } }else if(browser == "chrome"){ var kgchromeType = navigator.mimeTypes["application/kg-plugin"]; //高级版 var chromeType = navigator.mimeTypes["application/kg-activex"]; //标准版 var oldChromeType = navigator.mimeTypes["application/iWebPlugin"]; //早期淘汰版本 if(document.getElementById("WebOffice").type == "application/kg-plugin"){ if (kgchromeType == undefined) { document.getElementById("WebOffice").width = "1px"; var str='该插件不受支持引用的是高级版控件'; var t = document.getElementById("OfficeDiv"); t.innerHTML = t.innerText + str; //window.open("Faq002.html"); } }else{ if(version > "45"){ if (chromeType == undefined || oldChromeType == undefined) { document.getElementById("WebOffice").width = "1px"; var str='该插件不受支持引用的是标准版控件'; var t = document.getElementById("OfficeDiv"); t.innerHTML = t.innerText + str; } }else{ document.getElementById("WebOffice").width = "1px"; var str='标准版插件不受支持请更换45版本以下的Chrome浏览器如果需要使用高版本Chrome浏览器,需集成高级版插件'; var t = document.getElementById("OfficeDiv"); t.innerHTML = t.innerText + str; } } }}*/在iWebOffice2015.js末尾将拼接好的字符串暴露出来金格WebOffice2015-----vue项目_chrome_09

代码示例vue文件中import引入iWebOffice2015.js initWebOffice通过创建vue实例手动挂载来渲染，将刚才暴露出来的加载到office initWebOfficeObject中的关键点是this.webOfficeObj.CreateFile()，创建一个空白的文档 import Vue from 'vue'; import webOfficeTpl from '../../../../../static/webOffice/iWebOffice2015.js'; export default { data() { return { webOffice: null, webOfficeObj: null } }, beforeCreate(){ }, mounted(){ console.log(webOfficeTpl); this.$nextTick(() => { this.initWebOffice(); this.initWebOfficeObject(); }) }, beforeDestroy() { }, methods: { initWebOffice() { this.webOffice = new Vue({ template: webOfficeTpl }).$mount('#office'); }, initWebOfficeObject() { this.webOfficeObj = new WebOffice2015(); this.webOfficeObj.setObj(document.getElementById('WebOffice')); try{ //this.webOfficeObj.ServerUrl = "http://www.kinggrid.com:8080/iWebOffice2015/OfficeServer"; //this.webOfficeObj.RecordID = "1551950618511"; //RecordID:本文档记录编号 this.webOfficeObj.UserName = "XXX"; this.webOfficeObj.FileName = "Mytemplate.doc"; this.webOfficeObj.FileType = ".doc"; //FileType:文档类型 .doc .xls this.webOfficeObj.ShowWindow = false; //显示/隐藏进度条 this.webOfficeObj.EditType = "1"; //设置加载文档类型 0 锁定文档，1无痕迹模式，2带痕迹模式 this.webOfficeObj.ShowMenu = 1; this.webOfficeObj.ShowToolBar = 0; this.webOfficeObj.SetCaption(this.webOfficeObj.UserName + "正在编辑文档"); // 设置控件标题栏标题文本信息 //参数顺序依次为：控件标题栏颜色、自定义菜单开始颜色、自定义工具栏按钮开始颜色、自定义工具栏按钮结束颜色、 //自定义工具栏按钮边框颜色、自定义工具栏开始颜色、控件标题栏文本颜色（默认值为：0x000000） if (!this.webOfficeObj.WebSetSkin(0xdbdbdb, 0xeaeaea, 0xeaeaea, 0xdbdbdb, 0xdbdbdb, 0xdbdbdb, 0x000000)) { alert(this.webOfficeObj.Status); } //设置控件皮肤 if(this.webOfficeObj.WebOpen()) { // StatusMsg(WebOfficeObj.Status); } this.webOfficeObj.AppendMenu("1","打开本地文件(&L)"); this.webOfficeObj.AppendMenu("2","保存本地文件(&S)"); this.webOfficeObj.AppendMenu("3","-"); this.webOfficeObj.AppendMenu("4","打印预览(&C)"); this.webOfficeObj.AppendMenu("5","退出打印预览(&E)"); this.webOfficeObj.AddCustomMenu(); this.webOfficeObj.HookEnabled(); this.webOfficeObj.CreateFile() // 根据FileType设置的扩展名来创建对应的空白文档 } catch(e){ console.log("catch"); console.log(e.description); } } } }通过控制台可查看金格WebOffice2015-----vue项目_vue_10

效果

金格WebOffice2015-----vue项目_html_11

参考文章：vue项目如何集成金格WebOffice2015，集成的过程中借鉴了该篇博客中的实现思路，遇到问题的童鞋可参考这篇博客注：遇到错误可参考如浏览器打开提示不支持插件，先核实是否安装了iWebOfiice2015.msi，如已安装，打开这里的企业应用浏览器进行测试金格WebOffice2015-----vue项目_chrome_12

启动KGPMSYS服务金格WebOffice2015-----vue项目_chrome_13

下载

官网地址：http://www.goldgrid.com/jinge_download/index.aspx?num=5

金格WebOffice2015-----vue项目_vue

解压后的文件

安装插件安装iWebOfiice2015.msi 金格WebOffice2015-----vue项目_vue_04

实现将iWebOffice2015.js和WebOffice.js放入static目录下

金格WebOffice2015-----vue项目_chrome_05

index.html中引入WebOffice.js

金格WebOffice2015-----vue项目_vue_06

修改iWebOffice2015.js 官网iWebOffice2015.js源文件在下面截图处少了一个闭合标签，如下图添加金格WebOffice2015-----vue项目_chrome_07

由于异步加载不允许使用document.write方法，这里注释掉document.write(str) 金格WebOffice2015-----vue项目_html_08

效果

金格WebOffice2015-----vue项目_html_11

启动KGPMSYS服务金格WebOffice2015-----vue项目_chrome_13

赞收藏评论分享举报

上一篇：互联网行业的常用黑话，你知道几条？

下一篇：vue项目打包：修改dist文件名

【本文地址】

金格WebOffice2015

金格WebOffice2015

今日新闻

推荐新闻