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

草图

在这里插入图片描述

实现案例的基本原型

这里我们的样式库使用的是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"

组件：

<DocumentEditorid="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><DocumentEditorid="xxx"documentServerUrl="http://192.168.234.138:8080":config="config"/></template></div></div>
</template>