vue项⽬如何集成⾦格WebOffice2015
关于⾦格WebOffice2015是什么就不说了，可以⾃⾏百度下，最近在调研这个东西，所以下了试⽤版集成到vue项⽬使⽤。
⾦格的说明⽂档写的很模糊，看完还是不知其所以然。下⾯就具体说下WebOffice2015集成到vue项⽬的⽅式：
1、随便下载⼀个试⽤版
解压后的⽂件，可以直接把这个⽂件当做⼀个插件放置到vue的某个⽬录下待后续使⽤，我放置到static中了。
js⽂件中的iWebOffice2015.js主要是根据不同的浏览器环境来渲染<object>，并为<object>进⾏了适当的配置。
WebOffice.js是WebOffice2015对象的⼀些⽅法。
2、在index.html中引⼊WebOffice.js
<script type="text/javascript" src="./static/plugins/html/js/WebOffice.js"></script>
3、渲染<object>、创建WebOffice2015对象并进⾏适当的配置
WebOffice2015通过<object>集成
<object id="WebOffice" width="100%" height="100%" clsid="CLSID:D89F482C-5045-4DB5-8C53-D2C9EE71D025" type="application/kg-plugin" oncomman
这⾥我对iWebOffice2015.js稍微做了更改，第⼀点，绿圈处的闭合标签是后来加上去的，官⽅下载的⽂件绿圈处少⼀个闭合标签，导致
页⾯⽆法正常渲染，第⼆点，将拼接好的<object>字符串暴露出来，并在vue⽂件中import通过创建vue实例⼿动挂载来渲染<object>。
<template>
<div class="word-wrap">
<div id="office"></div>
</div>
</template>
<script>
import Vue from 'vue';
import webOfficeTpl from '../../../../static/plugins/html/js/iWebOffice2015.js'
export default {
data() {
return {
webOffice: null,
webOfficeObj: null
};
},
methods:{
renderWebOfficePage() {
this.webOffice = new Vue({
template: webOfficeTpl
}).$mount('#office');
},
initWebOfficeObject() {
this.webOfficeObj = new WebOffice2015();
this.webOfficeObj.ElementById('WebOffice'));
try
{
this.webOfficeObj.WebUrl = "www.kinggrid: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;
如何下载javascript
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("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(e.description);
}
}
},
mounted() {
this.$nextTick(() => {
this.initWebOfficeObject()
})
},
beforeDestroy() {
this.webOfficeObj.WebClose();
}
};
</script>
<style scoped lang="scss">
.word-wrap {
width: 100%;
height: 100%;
}
</style>
最后看下集成后打个本地word的效果