WebOffice 文档在线编辑

简介

　　本文介绍的 WebOffice 控件是由广州市华尔太科技有限公司开发的一款在网页里处理 Office 文件的产品。 WebOffice 控件支持几乎所有对在线文档功能的需求，如在线新建、编辑、保存、多人协作 Office 文件等。
它具有以下核心功能

　　1、远程打开、保存：WebOffice全自动，无需手动上传下载，遵守标准HTTP/HTTPS传输协议，支持服务器同步和异步方式保存文件。
　　2、智能填报/读取：可从数据库指定字段提取数据，填充文档指定位置，也可从文档指定位置读取数据到数据库指定字段。
　　3、强大的API接口和VBA扩展能力：高效API与VBA扩展，任意办公文档扩展功能均可用VBA整合JS满足业务需求。

　　官网入口

优缺点

　　相比于 WPS 提供的 WebOffice，广州市华尔太科技有限公司的 WebOffice 控件具有价格低、接入简单（前端无需额外安装包）和 dome 丰富的优点。

　　WebOffice 控件也有很致命的缺点，即客户端需要在本地安装 WebOffice 控件。另外 WebOffice 控件的操作窗口是弹出一个单独的窗口，在这个窗口没法打开控制台，不方便调试，而且样式也很老旧。

　　WebOffice 控件好像没有文档（我没找到，这也是写这篇文章的原因），虽然提供了大量的实现各种功能的 demo，但是并没有涵盖所有的操作，所以有时候就得去翻 Microsoft Office 的文档。

几个可能用得着的文档地址

Office 加载项 JavaScript API 参考
Docs .NET .NET API browser Microsoft.Office.Interop.Word Table
Office VBA 参考
在线演示（官网给的 demo，一般需要下载下载，然后设置正确的 UserName 和 Authorizer 才能运行）

备忘

WORD

 WebOffice.ActiveDocument.Tables(1); // 返回文件的第一个表格对象WebOffice.ActiveDocument.Tables.Count; // 返回文档中表格的数量WebOffice.ActiveDocument.Tables(1).Rows.Count; // 返回文档中第一个表格的行数WebOffice.ActiveDocument.Tables(1).Columns.Count; // 返回文档中第一个表格的列数WebOffice.ActiveDocument.Tables(1).Rows(1).Delete(); // 删除表格的第一行WebOffice.ActiveDocument.Application.Selection.Type // number 1 表示没有选中内容。 2 表示选中文本内容console.log(WebOffice.IsDirty); // 只读属性，表示文档是否有修改// 保护文档，使文档那个不可编辑WebOffice.ActiveDocument.Protect(3,false,this.pwd,false,true);// 先解除保护，使文档可编辑WebOffice.ActiveDocument.Application.ActiveDocument.UnProtect(this.pwd);

dome

文档操作页面

<template>
<div class="web-edit"><div class="left"><div class="btn-area"><el-button size="small" @click="quiteAction">退出</el-button><el-button size="small" type="primary" @click="HttpPostSave">保存</el-button></div><div class="content-warp"><template v-for="classifyLevel1 in fieldList" ><p class="title max-title" :key="classifyLevel1.type"><span @click="unfoldAction(classifyLevel1)" class="can-click">{{classifyLevel1.type}}<i v-if="classifyLevel1.isUnfold" class="el-icon-caret-bottom"></i><i v-else class="el-icon-caret-right"></i></span></p><template v-if="classifyLevel1.isUnfold"><div class="field-box" v-for="classifyLevel2 in classifyLevel1.fieldList" :key="classifyLevel2.classifyName"><p class="title"><span @click="unfoldAction(classifyLevel2)" class="can-click">{{classifyLevel2.classifyName}}<i v-if="classifyLevel2.isUnfold" class="el-icon-caret-bottom"></i><i v-else class="el-icon-caret-right"></i></span></p><div class="field-list" v-if="classifyLevel2.isUnfold"><span @click="insertAction(item, classifyLevel1.type)" class="item can-click" :class="{'is-checked': item.checked}" v-for="item in classifyLevel2.fieldList" :key="item.id">{{item.name}}</span></div></div></template></template></div></div><div class="right"><object classid="clsid:FF09E4FA-BFAA-486E-ACB4-86EB0AE875D5" codebase="http://www.officectrl.com/weboffice/WebOffice.ocx#Version=2018,1,6,2" id="WebOffice" width="100%" height="100%" ></object></div></div>
</template>
<script>
import { temDetail, getFieldList, saveFieldsList } from "@/api/baseInfo";
import { setToken } from '@/utils/auth'export default {data () {return {strUrl: '',doctype: '',imgList: [],WebOffice: '',fileName: '',orderId: null,editId: null,pwd: Date.now().toString(),fieldList: [],fields: [], // 已选的字段列表}},created() {let query = this.$route.query;let token = query.token;setToken(token, false);if (query.id) {this.editId = query.id;this.getFieldList();this.temDetail();}},mounted() {},methods:{// 插入表格/*** data 表格的数据;* columnsCount 列数;* rowsCount 行数;* isAdapt 是否自动调整表格中单元格的大小以适应单元格的内容（word 中）（可选）*/insertTable(data, columnsCount, rowsCount=1, isAdapt=true) {const range = WebOffice.ActiveDocument.Application.Selection.Range;const table = WebOffice.ActiveDocument.Tables.Add(range, rowsCount, columnsCount, isAdapt);if (table.Rows.Count > rowsCount) {table.Rows(table.Rows.Count).Delete();alert("提示：两个表格之间至少有一行空行");return;}data = Array.isArray(data) ? data : [];if (rowsCount < 1) {alert("表格的行数不能小于 1");} else {data.forEach((rows, rowIndex) => {if (Array.isArray(rows)) {// 二维数组，不止一行的情况下rows.forEach((cell, columnIndex) => {table.Cell(rowIndex + 1, columnIndex + 1).Range.InsertAfter(cell);})} else {// 只有一行table.Cell(1, rowIndex + 1).Range.InsertAfter(rows);}})}range = null;table = null;// WebOffice.ActiveDocument.Tables(1); // 返回文件的第一个表格对象// WebOffice.ActiveDocument.Tables.Count; // 返回文档中表格的数量// WebOffice.ActiveDocument.Tables(1).Rows.Count; // 返回文档中第一个表格的行数// WebOffice.ActiveDocument.Tables(1).Columns.Count; // 返回文档中第一个表格的列数// WebOffice.ActiveDocument.Tables(1).Rows(1).Delete(); // 删除表格的第一行// WebOffice.ActiveDocument.Application.Selection.Type // number 1 表示没有选中内容。 2 表示选中文本内容// console.log(WebOffice.IsDirty); // 只读属性，表示文档是否有修改// 保护文档，使文档那个不可编辑// WebOffice.ActiveDocument.Protect(3,false,this.pwd,false,true);// 先解除保护，使文档可编辑// WebOffice.ActiveDocument.Application.ActiveDocument.UnProtect(this.pwd);},unfoldAction(item) {item.isUnfold = !item.isUnfold;},insertAction(field, type) {let isRevise = WebOffice.ActiveDocument.Application.Selection.Type === 2;// 先解除保护，使文档可编辑// WebOffice.ActiveDocument.Application.ActiveDocument.UnProtect(this.pwd);if (isRevise) {WebOffice.ActiveDocument.Application.Selection.Cut(); // 删除所选内容,并将内容移至剪切板}if (type === "表格") {let columnsCount = field.header.length, rowsCount = 2;let data = [field.header, field.header.map(() => "")];this.insertTable(data, columnsCount, rowsCount);} else {// 在光标处插入文本WebOffice.ActiveDocument.Application.Selection.Range.InsertAfter(field.code);}if (!this.fields.includes(field.id)) {this.fields.push(field.id);}// 保护文档，使文档不可编辑// WebOffice.ActiveDocument.Protect(3,false,this.pwd,false,true);},temDetail() {temDetail(this.editId).then(res => {let strUrl = res.alioss.attachmentUrl;let fileName = res.alioss.fileName;this.fileName = fileName;let doctype = '';let index = fileName.lastIndexOf('.');doctype = fileName.substring( index + 1, fileName.length);const WebOffice = document.getElementById('WebOffice');// 正确设置 UserName 和 Authorizer 才能正确打开WebOffice.UserName="公司名称";WebOffice.Authorizer="www.officectrl.com";this.$nextTick(() => {setTimeout(() => {WebOffice.MenuBar = false;WebOffice.Toolbars = true; // 是否显示工具栏WebOffice.Titlebar = false;WebOffice.Open(strUrl, true, doctype);// WebOffice.ActiveDocument.Protect(3,false,this.pwd,false,true);}, 1000)})}).catch(error => {console.log(error);})},quiteAction() {window.close();},// 保存文件(同步保存)HttpPostSave() {this.saveFieldsList();const strSaveUrl = process.env.VUE_APP_BASE_API + '/api/retemplate/upload';try { WebOffice.HttpInit();WebOffice.HttpAddPostString('id', this.editId);WebOffice.HttpAddPostCurrFile("docfile","");//此句为固定语句，不管是保存word还是excel,ppt等都这样写const strResults = WebOffice.HttpPost(strSaveUrl);// console.log(strResults);// strResults;//如果保存成功，编程时让服务器接收代码如upload.jsp,upload.aspx,upload.php等返回空值或OK字串。// if(strResults.indexOf('ok') > 1)alert('office文档保存成功!');}catch(e) {alert('发生错误！请使用查阅返回值！');}   },// 获取可配置的字段getFieldList() {getFieldList(this.editId).then(res =>{this.fieldList = res.map(item => {this.$set(item, "isUnfold", true);if(item.fieldList && item.fieldList.length) {item.fieldList.forEach(el => {this.$set(el, "isUnfold", true);})}return item;});}).catch(err => {console.log(err);})},saveFieldsList() {let params = {id: this.editId,fields: this.fields}saveFieldsList(params).then(res => {alert('保存成功');}).catch(err => {console.log(err);})},}
}
</script>
<style lang="scss" scoped>
.web-edit {display: flex;width: 100%;height: 100%;box-sizing: border-box;overflow: hidden;background-color: #fff;.can-click {cursor: pointer;}.left {display: flex;flex-direction: column;font-size: 14px;width: 400px;padding-left: 10px;.btn-area {padding: 30px 0 20px;text-align: center;.el-button {width: 100px;& + .el-button {margin-left: 20px;}}}.content-warp {flex: 1;overflow-x: hidden;overflow-y: auto;}.title {.el-icon-caret-right, .el-icon-caret-bottom {color: #409eff;}}.max-title {margin-top: 10px;font-size: 16px;}.field-box {padding: 10px 15px 0;.field-list {padding: 10px 10px 0;.item {display: inline-block;padding: 0 8px;margin: 5px 15px 5px 0;font-size: 14px;line-height: 23px;background-color: #eee;white-space: nowrap;border-radius: 3px;&:hover, .is-checked{color: #fff;background-color: #409eff;}}}}}.right {flex: 1;height: 100%;#WebOffice {width: 100%!important;height: 100%!important;}}}
</style>

打开编辑页面的方法

// 编制动作editAction(id) {let pre = "weboffice://|Officectrl|"; // 这个很关键！！！let host = window.location.host;let browerType = this.getBrowser();let token = getToken();if (browerType == 0) {const { href } = this.$router.resolve({name: "edit",query: { 'id': id, 'token': token}});window.open(href, '_blank');} else {let strUrl = pre + 'http://' + host + '/#/edit?id=' + id + '&token=' + token;window.open(strUrl, '_blank');}},// 检查浏览器类型getBrowser() {   let Sys = {};let ua = navigator.userAgent.toLowerCase();let s;let ver;(s = ua.match(/edge\/([\d.]+)/)) ? Sys.edge = s[1] :(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;if (Sys.edge) return 1;if (Sys.ie) return 0;if (Sys.firefox) return 1;if (Sys.chrome){ ver = Sys.chrome;ver.toLowerCase();var arr = ver.split('.');if(parseInt(arr[0])>43){return 1;}else{return 0;}}if (Sys.opera) return 1;if (Sys.safari) return 1;return 1;},

效果