onlyoffice实现在单页面加载文档的功能

news2024/10/7 14:24:19

草图

在这里插入图片描述

实现案例的基本原型

这里我们的样式库使用的是Tailwindcss，我们的前端UI组件库使用的是Ant Design Vue。

基本原型是，有个按钮，没有点击按钮的时候，页面显示的时普通的内容。当点击这个按钮的时候，页面加载文档并渲染到普通内容原本的位置进行替换。

下面的代码进行了基本的实现，但是遗留了一个问题，就是没有动态的加载文档。

怎么动态的加载文档呢？

<script setup>
import {message} from "ant-design-vue";
import {ref} from "vue";

const isDocument = ref(false)
const onLoadDocumentClick = () => {
  message.success("load document")
  isDocument.value = true
}
</script>
<template>
  <div class="bg-indigo-50 p-8 min-h-screen">
    <div class="bg-amber-200 p-8">
      <a-button type="primary" @click="onLoadDocumentClick">Load Document</a-button>
    </div>
    <div class="bg-amber-400 p-8 min-h-96">
      <template v-if="!isDocument">content</template>
      <template v-else>
        document content
      </template>
    </div>
  </div>
</template>

如何渲染文档？

首先，有三个非常重要的URL：

文档服务器地址：documentServerUrl="http://192.168.234.138:8080"
文档地址：url: "http://192.168.234.138:18889/test.docx"
回调地址：callbackUrl: "http://192.168.234.138:18889/doc/callback"

组件：

<DocumentEditor
      id="docEditor"
      documentServerUrl="http://192.168.234.138:8080"
      :config="config"
      :events_onDocumentReady="onDocumentReady"
      :onLoadComponentError="onLoadComponentError"
  />

组件配置：

const config = {
  document: {
    fileType: "docx",
    key: "Khirz6zTPdfd7",
    title: "Example Document Title.docx",
    url: "http://192.168.234.138:18889/test.docx"
  },
  documentType: "word",
  editorConfig: {
    callbackUrl: "http://192.168.234.138:18889/doc/callback",
    lang: 'zh-CN', // 设置语言 en / zh-CN
  },
  height: '700px',
  width: '100%'
}

最终代码

<script setup>
import {message} from "ant-design-vue";
import {ref} from "vue";
import {DocumentEditor} from "@onlyoffice/document-editor-vue";

const isDocument = ref(false)
const onLoadDocumentClick = () => {
  message.success("load document")
  isDocument.value = true
}
const config = {
  document: {
    fileType: "docx",
    key: "Khirz6zTPdfd7",
    title: "Example Document Title.docx",
    url: "http://192.168.234.138:18889/test.docx"
  },
  documentType: "word",
  editorConfig: {
    callbackUrl: "http://192.168.234.138:18889/doc/callback",
    lang: 'zh-CN', // 设置语言 en / zh-CN
  },
  height: '700px',
  width: '100%'
}
</script>
<template>
  <div class="bg-indigo-50 p-8 min-h-screen">
    <div class="bg-amber-200 p-8">
      <a-button type="primary" @click="onLoadDocumentClick">Load Document</a-button>
    </div>
    <div class="bg-amber-400 p-8 min-h-96">
      <template v-if="!isDocument">content</template>
      <template v-else>
        <DocumentEditor
            id="xxx"
            documentServerUrl="http://192.168.234.138:8080"
            :config="config"
        />
      </template>
    </div>
  </div>
</template>