zdppy_docserver结合zdpvue_client开发前后端分离的文档管理系统

本文主要是介绍zdppy_docserver结合zdpvue_client开发前后端分离的文档管理系统，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

创建前端应用

pnpm create vite

安装依赖

pnpm add @onlyoffice/document-editor-vue

基本使用

这里有三个非常关键的URL地址：

文档服务地址：http://192.168.101.5:8080
文档地址：http://192.168.101.5:18889/test.docx
回调地址：http://192.168.101.5:18889/doc/callback

其中，文档地址和回调地址，是我们使用 zdppy_api 开发的后端接口。文档服务地址，就是Docker启动的docserver容器的地址。

修改 src/App.vue：

<script>
import { defineComponent } from 'vue';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";export default defineComponent({name: 'ExampleComponent',components: {DocumentEditor},data() {return {config: {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.101.5:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.101.5:18889/doc/callback",},height: '700px',width: '100%'}}},methods: {onDocumentReady() {console.log("Document is loaded");},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.101.5:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>

改造成vue3的setup语法

原始代码

<script>
import { defineComponent } from 'vue';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";export default defineComponent({name: 'ExampleComponent',components: {DocumentEditor},data() {return {config: {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.101.5:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.101.5:18889/doc/callback",},height: '700px',width: '100%'}}},methods: {onDocumentReady() {console.log("Document is loaded");},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.101.5:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>

第一步：引入组件

import { DocumentEditor } from "@onlyoffice/document-editor-vue";

第二步：实现config配置信息对象

const config = {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.101.5:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.101.5:18889/doc/callback",},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 setup>
import {DocumentEditor} from "@onlyoffice/document-editor-vue";const config = {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.101.5:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.101.5:18889/doc/callback",},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.101.5:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>