vue项目集成金格WebOffice2015

下载

官网地址:http://www.goldgrid.com/jinge_download/index.aspx?num=5
vue项目集成金格WebOffice2015_第1张图片

  • 解压后的文件
    vue项目集成金格WebOffice2015_第2张图片
  • js文件中有两个重要的js文件iWebOffice2015.jsWebOffice.js
  • WebOffice.js是WebOffice2015对象的一些方法。
  • iWebOffice2015.js是根据不同的浏览器环境来渲染
    vue项目集成金格WebOffice2015_第3张图片


    实现

    iWebOffice2015.jsWebOffice.js放入static目录下

    vue项目集成金格WebOffice2015_第4张图片

    index.html中引入WebOffice.js

    在这里插入图片描述

    修改iWebOffice2015.js

    • 官网iWebOffice2015.js源文件在下面截图处少了一个闭合标签,如下图添加
      vue项目集成金格WebOffice2015_第5张图片
    • 由于异步加载不允许使用document.write方法,这里注释掉document.write(str)
      在这里插入图片描述

    • 【可选操作】,注释浏览器判断,这里由于未写入文档流,所以获取一些属性是出错的,如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末尾将拼接好的字符串暴露出来
      在这里插入图片描述

      代码示例

      • vue文件中import引入iWebOffice2015.js
      • initWebOffice通过创建vue实例手动挂载来渲染,将刚才暴露出来的加载到office
      • initWebOfficeObject中的关键点是this.webOfficeObj.CreateFile(),创建一个空白的文档
      • 
        
        
        • 通过控制台可查看
          vue项目集成金格WebOffice2015_第6张图片


          效果

          vue项目集成金格WebOffice2015_第7张图片


          参考文章:vue项目如何集成金格WebOffice2015,集成的过程中借鉴了该篇博客中的实现思路,遇到问题的童鞋可参考这篇博客

          注:遇到错误可参考

          • 如浏览器打开提示不支持插件,先核实是否安装了iWebOfiice2015.msi,如已安装,打开这里的企业应用浏览器进行测试
            vue项目集成金格WebOffice2015_第8张图片
          • 启动KGPMSYS服务
            vue项目集成金格WebOffice2015_第9张图片
          posted @ 2019-08-27 10:43  95.8℃  阅读( ...)  评论( ...)  编辑 收藏
          刷新评论 刷新页面 返回顶部

          你可能感兴趣的:(vue项目集成金格WebOffice2015)