onlyoffice实现打开文档的功能

后端代码

import api
from api import middleware


async 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 component
      console.log(errorDescription);
      break;

    case -2: // Error load DocsAPI from http://documentserver/
      console.log(errorDescription);
      break;

    case -3: // DocsAPI is not defined
      console.log(errorDescription);
      break;
  }
}
</script>

<template>
  <DocumentEditor
      id="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 component
      console.log(errorDescription);
      break;

    case -2: // Error load DocsAPI from http://documentserver/
      console.log(errorDescription);
      break;

    case -3: // DocsAPI is not defined
      console.log(errorDescription);
      break;
  }
}
</script>

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

遗留的问题

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

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