- 使用VUE组件集成ONLYOFFICE

安装 ONLYOFFICE 文档 Vue 组件

在您的项目中从 npm 安装 ONLYOFFICE 文档 Vue 组件。运行命令：

npm install --save @onlyoffice/document-editor-vue

或者

yarn add @onlyoffice/document-editor-vue

使用 ONLYOFFICE 文档 Vue 组件

<template>
    <DocumentEditor 
        id="docEditor" 
        documentServerUrl="http://documentserver/"
        :config="config"
        :events_onDocumentReady="onDocumentReady"
    /> 
</template>

<script lang="ts">
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: "https://example.com/url-to-example-document.docx"
                },
                documentType: "word",
                editorConfig: {
                    callbackUrl: "https://example.com/url-to-callback.ashx"
                }
            }
        }
    },
    methods: {
        onDocumentReady() {
            console.log("Document is loaded");
        }
    },
});
</script>