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 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.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 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.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 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 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 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.101.5:8080"
      :config="config"
      :events_onDocumentReady="onDocumentReady"
      :onLoadComponentError="onLoadComponentError"
  />
</template>