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

英文名称

中文说明

AddComment

添加批注

AddElement

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

GetAllParagraphs

获取所有段落

GetAllTables

获取所有表格

GetElement

获取文档元素

GetCommentById

获取批注

GetPageCount

获取页数

GetRange

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

Search

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

英文名称

中文说明

AddText

添加段落文本

AddElement

添加段落要素

AddPageBreak

添加分页符

GetElement

获取段落元素

GetText

获取段落文本

GetRange

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

Search

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

Select

段落文本选中

SetBold

设置段落文本字体粗细

英文名称

中文说明

AddColumn

添加表格列

AddRow

添加表格行

AddElement

添加表格元素

GetElement

获取段落元素

GetText

获取段落文本

GetRange

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

Search

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

GetColumn

获取表格列

GetRow

获取表格行

Select

选中指定单元格

英文名称

中文说明

AddComment

指定位置添加批注

AddText

指定位置添加文本

GetParagraph

获取指定位置段落

GetRange

根据字坐标获取对应部分

GetText

获取指定位置文本

GetRange

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

Select

选中指定位置内容

SetHighlight

高亮指定位置内容

SetPosition

截取指定位置内容

方法名称

方法作用

callCommand

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

executeMethod

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

<!-- word展示 -->

         <view-word

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

          :editorConfig="viewWordCfg"

            ref="onlyofficeEditor"

<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>

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

        );