基于vue-onlyoffice实现企业office web在线应用

目录

1.背景... 1

2.Onlyoffice介绍... 2

3.Onlyoffice核心api介绍... 2

3.1 ApiDocument 2

3.2 ApiParagraph. 2

3.3 ApiTable. 2

3.4. ApiRange. 3

4.Onlyoffice插件介绍... 3

4.1 插件定义... 3

4.2 插件对象... 3

4.3 插件结构... 4

4.4 插件内嵌使用方式... 4

4.5 插件外挂使用方式... 5

5.集成方案介绍... 6

5.1 开发vue-onlyoffice文档组件... 6

5.2 基于插件实现文档切换和段落/表格内容选中... 8

6.集成问题分享... 9

6.1如何隐藏插件... 9

6.2避免onlyoffice跨域... 10

7.参考链接... 10

1.背景

基于文档审核项目,需要对审核的结果在office word里面进行高亮,并能自动跳转到指定页的对应文字处,基于这样的需求背景下,通过vue进行onlyoffice文档方案集成。

2.Onlyoffice介绍

3.Onlyoffice核心api介绍

3.1 ApiDocument

英文名称

中文说明

AddComment

添加批注

AddElement

添加文档元素(:元素常见类型Paragraph\Table)

GetAllParagraphs

获取所有段落

GetAllTables

获取所有表格

GetElement

获取文档元素

GetCommentById

获取批注

GetPageCount

获取页数

GetRange

根据字坐标获取对应文档部分

Search

根据文字内容获取对应文档部分

3.2 ApiParagraph

英文名称

中文说明

AddText

添加段落文本

AddElement

添加段落要素

AddPageBreak

添加分页符

GetElement

获取段落元素

GetText

获取段落文本

GetRange

根据字坐标获取对应段落部分

Search

根据文字内容获取对应段落部分

Select

段落文本选中

SetBold

设置段落文本字体粗细

3.3 ApiTable

英文名称

中文说明

AddColumn

添加表格列

AddRow

添加表格行

AddElement

添加表格元素

GetElement

获取段落元素

GetText

获取段落文本

GetRange

根据字坐标获取对应表格部分

Search

根据文字内容获取对应表格部分

GetColumn

获取表格列

GetRow

获取表格行

Select

选中指定单元格

3.4. ApiRange

英文名称

中文说明

AddComment

指定位置添加批注

AddText

指定位置添加文本

GetParagraph

获取指定位置段落

GetRange

根据字坐标获取对应部分

GetText

获取指定位置文本

GetRange

根据字坐标获取对应表格部分

Select

选中指定位置内容

SetHighlight

高亮指定位置内容

SetPosition

截取指定位置内容

4.Onlyoffice插件介绍

4.1 插件定义

ONLYOFFICE offer support for plugins allowing developers to add specific features to the editors that are not directly related to the OOXML format.

4.2 插件对象

Asc 对象

用于操作onlyoffice文档的对象

Asc.plugin对象

任何插件都有window.Asc.plugin对象,该对象又具有几种方法,用于与ONLYOFFICE文档、电子表格和演示文稿编辑器进行交互

方法名称

方法作用

callCommand

定义用于将数据发送回编辑器的方法。它允许插件发送结构化数据,这些数据可以插入到生成的文档文件中(格式化的段落、表格、文本部分和单独的单词等)

executeMethod

定义使用插件执行某些编辑器方法的方法

Asc.scope对象

用于将任何附加数据(对象、参数、变量等)传递给 window.Asc.plugin.callCommand 方法,该方法在其独立的上下文中执行

4.3 插件结构

Develop a plugin. Follow the plugin structure described here. The plugin folder must contain three files required for the plugin to work: config.jsonindex.htmlpluginCode.js.

4.4 插件内嵌使用方式

参考4.3方式自定义插件页面,即需按规范编写相关html、js逻辑,此时插件页面和onlyoffice展示页面会绑定在一起,如下图如下:

此时可以直接在js文件操作插件对象Asc

4.5 插件外挂使用方式

参考4.3方式自定义插件页面,此时赋予一个默认的index.html,js相关逻辑不用处理,通过这样处理,隐藏内嵌插件页面的同时,获取onlyoffice的插件对象Asc,从而可以独立于onlyoffice之外,用vue编写操作页面的逻辑,相对于4.4方式更灵活,并支持多文档切换,如下图所示:

#待分享(即通过外挂右侧操作页面,控制左侧word页面的元素)

由于此时不依赖js文件操作插件对象Asc,此时需要通过iframe机制即window对象,间接获取Asc对象,onlyoffice iframe视图如下:

此时获取获取Asc对象方法为

document.getElementsByTagName("iframe")[0]. .contentWindow[0].Asc

5.集成方案介绍

5.1 开发vue-onlyoffice文档组件

代码示例1:

<!-- word展示 -->

         <view-word

          v-if="docType === 'word'"

          :editorConfig="viewWordCfg"

            ref="onlyofficeEditor"

代码示例2:

<template>

  <div id="officeWord"></div>

</template>

<script>

import loadScript from "@/utils/loadScript";

// import "../js/api.js";

export default {

  name: "onlyofficeEditor",

  props: ["editorConfig"],

  mounted() {

    // 文档服务地址,依据环境更改

    const docApiUrl = `/office/web-apps/apps/api/documents/api.js`;

    loadScript(docApiUrl, "onlyoffice-api-script")

      .then(() => this.onLoad())

      .catch(() => {

        this.onError(-2);

      });

    // Promise.all([this.onLoad()]).catch(() => {

    //   this.onError(-2);

    // });

    // this.onReady();

  },

  beforeDestroy() {

    const id = "officeWord";

    if (window?.DocEditor?.instances[id]) {

      window.DocEditor.instances[id].destroyEditor();

      window.DocEditor.instances[id] = undefined;

    }

  },

  methods: {

    onLoad() {

      try {

        const id = "officeWord";

        if (!window.DocsAPI) this.onError(-3);

        if (window?.DocEditor?.instances[id]) {

          console.log("Skip loading. Instance already exists", id);

          return;

        }

        if (!window?.DocEditor?.instances) {

          window.DocEditor = { instances: {} };

        }

        const editor = window.DocsAPI.DocEditor(

          id,

          Object.assign(

            {

              events: {

                onAppReady: this.onAppReady,

              },

            },

            this.editorConfig

          )

        );

        window.DocEditor.instances[id] = editor;

      } catch (err) {

        console.error(err);

        this.onError(-1);

      }

    },

    onAppReady() {

      const id = "officeWord";

      window.DocEditor.instances[id];

    },

    onError(errorCode) {

      let message;

      switch (errorCode) {

        case -2:

          message = "Error load DocsAPI from " + this.documentServerUrl;

          break;

        case -3:

          message = "DocsAPI is not defined";

          break;

        default:

          message = "Unknown error loading component";

          errorCode = -1;

      }

      if (typeof this.onLoadComponentError == "undefined") {

        console.error(message);

      } else {

        this.onLoadComponentError(errorCode, message);

      }

    },

  },

};

</script>

<style scoped></style>

5.2 基于插件实现文档切换和段落/表格内容选中

const oIframe = document.getElementsByTagName("iframe")[0];

        if (!oIframe) {

          return;

        }

        let Asc = oIframe.contentWindow[0].Asc;

        const { tableId, startIndex, endIndex } = ele;

        Asc.scope.start = startIndex;

        Asc.scope.end = endIndex;

        Asc.scope.tableId = tableId;

        sessionStorage.setItem("ascScope-word", JSON.stringify(Asc.scope));

        console.log(Asc);

        // this.viewWordCfg

        Asc.plugin.callCommand(

          function () {

            // eslint-disable-next-line no-undef

            var oDocument = Api.GetDocument();

            var ascScope = JSON.parse(sessionStorage.getItem("ascScope-word"));

            var start_index = ascScope ? Number(ascScope.start) : 0;

            var end_index = ascScope ? Number(ascScope.end) : 0;

            var oTableArr = [];

            for (var i = 0; i < oDocument.GetElementsCount(); i++) {

              var oElement = oDocument.GetElement(i);

              var sClassType = oElement.GetClassType();

              if (sClassType == "table") {

                oTableArr.push(oElement);

              }

            }

            // 区分表格还是文字 进行提示

            //

            if (ascScope && ascScope.tableId !== null) {

              // 表格

              var oTable = oTableArr[0];

              //表格是按字数来的,不包括空格

              var oTableRange = oTable.GetRange(start_index, end_index);

              oTableRange.SetHighlight(20, 37, 220);

              oTableRange.Select();

            } else {

              // 文字

              var oRange = oDocument.GetRange(start_index, end_index);

              oRange.SetHighlight(20, 37, 220);

              oRange.Select();

            }

          },

          false,

          true

        );

6.集成问题分享

6.1如何隐藏插件

需修改插件目录下的config.json文件,即配置isVisual 为false 实现插件隐藏

6.2避免onlyoffice跨域

由于涉及iframe操作和第三方服务,需保证onlyoffice服务和前端服务在同一个nginx下,从而避免跨域

7.参考链接

文档相关: https://api.onlyoffice.com/docbuilder/basic

插件相关:https://api.onlyoffice.com/plugin/basic

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51844.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搜索引擎项目(四)

SearchEngine 王宇璇/submit - 码云 - 开源中国 (gitee.com) 基于Servlet完成前后端交互 WebServlet("/searcher") public class DocSearcherServlet extends HttpServlet {private static DocSearcher docSearcher new DocSearcher();private ObjectMapper obje…

Luma AI发布文生视频大模型Dream Machine——可免费在线试玩

Sora模型的文生视频能力&#xff0c;想必一定惊艳过你。虽然Sora模型很惊艳&#xff0c;但是并没有开放给普通大众。Luma AI发布文生视频大模型Dream Machine模型&#xff0c;可以免费供大家使用&#xff0c;任何人只要到Luma AI的官方网站&#xff0c;就可体验Luma AI的文生视…

java使用JNA调用C/C++动态库,char*无法转换问题

java使用JNA调用C/C动态库&#xff0c;char*无法转换问题 例如&#xff1a; C如下写法 char* test01(const char* &name, const int &age);对应&#xff1a; java中序如下写法 //导入的包 import com.sun.jna.Pointer;//java中需要对应的写法 Pointer test01(String…

六个开源的PDF转Markdown项目

✨ 1: gptpdf gptpdf 是一个利用VLLM解析PDF为Markdown的工具&#xff0c;几乎完美支持数学公式、表格等。 GPTPDF 是一个使用视觉大模型&#xff08;如 GPT-4o&#xff09;将 PDF 文件解析成 Markdown 文件的工具。它主要用于高效地解析 PDF 文档中的排版、数学公式、表格、…

React Native新架构系列-新架构介绍

从今天起&#xff0c;会陆续更新React Native新架构相关的系列内容&#xff0c;本系列基于React Native 0.73.4版本&#xff0c;从一名Android开发者的视角进行介绍。本系列介绍的内容默认读者对React Native有一定的了解&#xff0c;对基础的开发内容不再赘述。 前言 首先介绍…

【优选算法】——leetcode——438.找到字符串中所有字母异位词

目录 1.题目 2.题目理解 3.算法原理 1.如何快速判断两个字符串是否是异位词 2.解决问题 暴力求解——>滑动窗口哈希表 滑动窗口 利用滑动窗口哈希表解决问题 优化&#xff1a;更新结果的判断条件 4.编程代码 C代码 1.频率统计 2. 双指针 C语言代码 1.字符频率…

MATLAB C++语言编写MEX函数示例:求解本源根

作为一种提升运行效率的手段&#xff0c;MATLAB的MEX函数最初支持C语言编写&#xff0c;从2018a才开始支持基于C11的“现代”C编写MEX&#xff0c;并实现更多现代特性&#xff08;尤其是程序安全性方面&#xff09;。目前&#xff0c;MATLAB官方已不推荐继续用传统C语言编写新的…

【qt小系统】传感器云平台3D散点图(附源码)

摘要&#xff1a;本文主要使用QT5&#xff0c;实现了一个传感器云平台的小示例&#xff0c;模拟的是各类传感器的添加&#xff0c;例如&#xff1a;热成像传感器、温度传感器、超声波传感器&#xff0c;模拟添加完成后&#xff0c;会自动将此传感器的三维坐标增加到3D散点图上&…

Vmware安装openstack

安装虚拟机 创建完成后&#xff0c;点击开启虚拟机 稍等执行成功后 上传压缩包到指定目录。将yoga_patch.tar.gz包上传至/root目录下&#xff0c;将stack3_without_data.tar.gz包使用WinSCP上传至/opt目录下 vim run_yoga.sh #/bin/bash cd /root sudo apt-get update tar -xzv…

添加好友

目录 添加好友的思路&#xff1a; 1.假设A添加B a.如果B在线 b.如果B不在线 添加好友的思路&#xff1a; 1.假设A添加B A给服务端发送要添加B的消息&#xff0c;服务端接受后&#xff0c;先把A添加B的信息存入数据库&#xff0c;再去个人信息表查看B是否在线 a.如果B在线…

「问题解决」jdk高版本导致请求返回对象转换报错

报错&#xff1a;Caused by: java.lang.reflect.InaccessibleObjectException: Unable to make protected native java.lang.Object java.lang.Object.clone() throws java.lang.CloneNotSupportedException accessible: module java.base does not “opens java.lang” to unn…

UnityShaderUI编辑器扩展

前言&#xff1a; 当我们在制作通用Shader的时候&#xff0c;避免不了许多参数混杂在一起&#xff0c;尽管在材质面板已经使用过Header标签来区分&#xff0c;但是较长的Shader参数就会导致冗余&#xff0c;功能块不够简约明了&#xff0c;如图&#xff1a; 对于Shader制作者来…

FPGA开发——蜂鸣器的控制

一、概述 在项目开发的过程当中&#xff0c;我会通常会需要一个东西就行报警显示&#xff0c;有使用语音报警&#xff0c;信息报警等注入此类的方式&#xff0c;但最为简单使用的还是蜂鸣器的使用&#xff0c;蜂鸣器控制简单&#xff0c;成本低&#xff0c;是最为常用的模块之…

测试面试宝典(三十七)—— 接口测试中的加密参数如何处理?

1&#xff09;先了解接口使用的加密方式(md5、rsa...) 2&#xff09;检查接口测试工具是否支持这种加密方式&#xff0c;如果支持的话&#xff0c;直接使用对应功能就行了(比如Jmeter支持md5)&#xff1b;如果加密方式是公司内部特有的算法&#xff0c;可以在接口测试工具中调…

柯尔莫哥洛夫-阿诺德网络

柯尔莫哥洛夫-阿诺德网络&#xff08;Kolmogorov-Arnold Network&#xff0c;简称KAN&#xff09;是一个理论框架&#xff0c;主要用于描述高维函数如何通过一组低维函数的组合来近似表示。这个理论的基础源自安德烈柯尔莫哥洛夫和弗拉基米尔阿诺德在函数逼近理论中的工作&…

NSSRound#4 Team

[NSSRound#4 SWPU]1zweb 考察&#xff1a;phar的反序列化 1.打开环境&#xff0c;审计代码 1.非预期解 直接用file伪协议读取flag,或直接读取flag file:///flag /flag 2.正常解法 用读取文件读取index.php,upload.php的源码 index.php: <?php class LoveNss{publi…

3. Docker的数据管理与持久化

在Docker容器化应用中&#xff0c;数据的持久化和管理是一个关键问题。容器的生命周期短暂&#xff0c;容器的停止和删除会导致数据丢失。因此&#xff0c;了解Docker的数据卷&#xff08;Volumes&#xff09;和挂载&#xff08;Mounts&#xff09;的管理方式&#xff0c;对保障…

环境搭建-Docker搭建ClickHouse

Docker搭建ClickHouse 一、前言二、ClickHouse安装2.1 拉取镜像运行ClickHouse服务 三、测试安装3.1 进入clickhouse容器3.2 命令补充说明 四、测试连接五、设置CK的用户名密码 一、前言 本文使用的Docker使用Windows搭建&#xff0c;Linux版本的搭建方式一样。 Windows系统搭…

Data Race: 并发编程中的数据竞争问题

Data Race: 并发编程中的数据竞争问题 &#x1f50d; &#x1f680; Data Race: 并发编程中的数据竞争问题 &#x1f50d;摘要引言正文内容一、什么是数据竞争&#xff1f; &#x1f914;1.1 数据竞争的定义1.2 数据竞争的特征 二、数据竞争的原因和影响 &#x1f6a8;2.1 原因…

Redis学习笔记——第18章 发布与订阅

第18章 发布与订阅 18.1 频道的订阅与退订 订阅关系保存在字典中&#xff0c;Key为频道&#xff0c;value为订阅该频道的客户端链表 18.2 模式的订阅与退订 可以使用通配符&#xff0c;如果订阅了news.*类型的频道&#xff0c;则会将news.*保存为一个Key&#xff0c;value为…