onlyoffice实现打开文档的功能

后端代码

import api
from api import middlewareasync def doc_callback(request):data = await api.req.get_json(request)print("callback === ", data)# status == 2 文档准备好被保存# status == 6 文档编辑会话关闭return api.resp.success()app = api.Api(routes=[api.resp.dir_route("/", "data"),api.resp.post("/doc/callback", doc_callback),],# middleware=[middleware.cors()],
)if __name__ == "__main__":app.run(port=18889)

前端代码

<script setup>
import {DocumentEditor} from "@onlyoffice/document-editor-vue";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%'
}const onDocumentReady = () => {console.log("Document is loaded");
}const onLoadComponentError = (errorCode, errorDescription) => {switch (errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}
}
</script><template><DocumentEditorid="docEditor"documentServerUrl="http://192.168.234.138:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>

打开文档案例

有个按钮，点击这个按钮，打开指定的文档。

实现思路

1、有个首页
2、首页里面有个按钮
3、点击按钮跳转到文档页面

实现方案

1、引入vue-router
2、定义index首页
3、定义document文档页面
4、通过vue-router自带的路由跳转，实现点击跳转页面

完整代码

package.json

{"name": "zdpvue_docclient","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"@onlyoffice/document-editor-vue": "^1.4.0","ant-design-vue": "^4.2.3","vue": "^3.4.29","vue-router": "^4.4.0"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.5","vite": "^5.3.1"}
}

src/main.js

import {createApp} from 'vue'
import router from "./router"import 'ant-design-vue/dist/reset.css';
import Antd from 'ant-design-vue';import App from './App.vue'const app = createApp(App)
app.use(router)
app.use(Antd)app.mount('#app')

src/App.vue

<template><router-view/>
</template>

src/router/index.js

import {createWebHistory, createRouter} from 'vue-router'import Index from '../page/index/index.vue'
import Document from '../page/document/index.vue'const routes = [{path: '/', component: Index},{path: '/document', component: Document},
]const router = createRouter({history: createWebHistory(),routes,
})export default router

src/page/index/index.vue

<script setup>
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";const router = useRouter()
const onOpenDocumentClick = () => {message.success('This is a success message');router.push({ path: '/document', query: { key: 'abc' } })
}
</script>
<template><a-space wrap><a-button type="primary" @click="onOpenDocumentClick">Open Document</a-button></a-space>
</template>

src/page/document/index.vue

<script setup>
import {DocumentEditor} from "@onlyoffice/document-editor-vue";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%'
}const onDocumentReady = () => {console.log("Document is loaded");
}const onLoadComponentError = (errorCode, errorDescription) => {switch (errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}
}
</script><template><DocumentEditorid="docEditor"documentServerUrl="http://192.168.234.138:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>

遗留的问题

上面的方案，没办法解决动态渲染不同文档的问题。

如果要解决点击按钮以后，根据key渲染不同的文档，还需要额外做一些操作。