vue2在线预览文档——Onlyoffice

以下三个链接，结合看：

Java + vue3 ：springboot vue 初步集成onlyoffice_vue集成onlyoffice_Mr-Wanter的博客-CSDN博客
使用docker + vue2：vue2 集成 Onlyoffice_vue集成onlyoffice-CSDN博客
Onlyoffice + vue3官网例子：https://api.onlyoffice.com/editors/vue

1. 安装依赖

安装完依赖就直接看第二步，官网现在是vue3 + ts + Onlyoffice结合

Onlyoffice官网：https://api.onlyoffice.com/editors/vue

若报版本错误：可以尝试npm install --save @onlyoffice/document-editor-vue --legacy-peer-deps

 2. 在vue项目中定义两个文件

（以下相关步骤和代码均来自vue2 集成 Onlyoffice_vue集成onlyoffice-CSDN博客，可以移步到这个博主的博客中）

index.vue代码

<template>
    <div :class="s.view">
        <div :id="id"></div>
    </div>
</template>
 
<script>
    import loadScript from './loadScript.js';
 
    export default {
        name: 'DocumentEditor',
        props: {
            id: {
                type: String,
                default: '',
            },
            documentServerUrl: {
                type: String,
                default: '',
            },
            config: {
                type: Object,
                default: () => { },
            },
            document_fileType: {
                type: String,
                default: '',
            },
            document_title: {
                type: String,
                default: '',
            },
            documentType: {
                type: String,
                default: '',
            },
            editorConfig_lang: {
                type: String,
                default: '',
            },
            height: {
                type: String,
                default: '',
            },
            type: {
                type: String,
                default: '',
            },
            width: {
                type: String,
                default: '',
            },
            events_onAppReady: {
                type: Function,
                default: () => { },
            },
            events_onDocumentStateChange: {
                type: Function,
                default: () => { },
            },
            events_onMetaChange: {
                type: Function,
                default: () => { },
            },
            events_onDocumentReady: {
                type: Function,
                default: () => { },
            },
            events_onInfo: {
                type: Function,
                default: () => { },
            },
            events_onWarning: {
                type: Function,
                default: () => { },
            },
            events_onError: {
                type: Function,
                default: () => { },
            },
            events_onRequestSharingSettings: {
                type: Function,
                default: () => { },
            },
            events_onRequestRename: {
                type: Function,
                default: () => { },
            },
            events_onMakeActionLink: {
                type: Function,
                default: () => { },
            },
            events_onRequestInsertImage: {
                type: Function,
                default: () => { },
            },
            events_onRequestSaveAs: {
                type: Function,
                default: () => { },
            },
            events_onRequestMailMergeRecipients: {
                type: Function,
                default: () => { },
            },
            events_onRequestCompareFile: {
                type: Function,
                default: () => { },
            },
            events_onRequestEditRights: {
                type: Function,
                default: () => { },
            },
            events_onRequestHistory: {
                type: Function,
                default: () => { },
            },
            events_onRequestHistoryClose: {
                type: Function,
                default: () => { },
            },
            events_onRequestHistoryData: {
                type: Function,
                default: () => { },
            },
            events_onRequestRestore: {
                type: Function,
                default: () => { },
            },
        },
        data() {
            return {};
        },
        watch: {
            config: {
                handler() {
                    this.onChangeProps();
                },
                deep: true,
            },
            document_fileType() {
                this.onChangeProps();
            },
            document_title() {
                this.onChangeProps();
            },
            documentType() {
                this.onChangeProps();
            },
            editorConfig_lang() {
                this.onChangeProps();
            },
            height() {
                this.onChangeProps();
            },
            type() {
                this.onChangeProps();
            },
            width() {
                this.onChangeProps();
            },
        },
        mounted() {
            let url = this.documentServerUrl;
            if (!url.endsWith('/')) {
                url += '/';
            }
            const docApiUrl = `${url}web-apps/apps/api/documents/api.js`;
            loadScript(docApiUrl, 'onlyoffice-api-script')
                .then(() => this.onLoad())
                .catch((err) => console.error(err));
        },
        beforeDestroy() {
            const id = this.id || '';
            if (window?.DocEditor?.instances[id]) {
                window.DocEditor.instances[id].destroyEditor();
                window.DocEditor.instances[id] = undefined;
            }
        },
        methods: {
            onLoad() {
                try {
                    const id = this.id || '';
                    if (!window.DocsAPI) throw new Error('DocsAPI is not defined');
                    if (window?.DocEditor?.instances[id]) {
                        console.log('Skip loading. Instance already exists', id);
                        return;
                    }
                    if (!window?.DocEditor?.instances) {
                        window.DocEditor = { instances: {} };
                    }
                    const initConfig = {
                        document: {
                            fileType: this.document_fileType,
                            title: this.document_title,
                        },
                        documentType: this.documentType,
                        editorConfig: {
                            lang: this.editorConfig_lang,
                        },
                        events: {
                            onAppReady: this.onAppReady,
                            onDocumentStateChange: this.events_onDocumentStateChange,
                            onMetaChange: this.events_onMetaChange,
                            onDocumentReady: this.events_onDocumentReady,
                            onInfo: this.events_onInfo,
                            onWarning: this.events_onWarning,
                            onError: this.events_onError,
                            onRequestSharingSettings: this.events_onRequestSharingSettings,
                            onRequestRename: this.events_onRequestRename,
                            onMakeActionLink: this.events_onMakeActionLink,
                            onRequestInsertImage: this.events_onRequestInsertImage,
                            onRequestSaveAs: this.events_onRequestSaveAs,
                            onRequestMailMergeRecipients: this.events_onRequestMailMergeRecipients,
                            onRequestCompareFile: this.events_onRequestCompareFile,
                            onRequestEditRights: this.events_onRequestEditRights,
                            onRequestHistory: this.events_onRequestHistory,
                            onRequestHistoryClose: this.events_onRequestHistoryClose,
                            onRequestHistoryData: this.events_onRequestHistoryData,
                            onRequestRestore: this.events_onRequestRestore,
                        },
                        height: this.height,
                        type: this.type,
                        width: this.width,
                        ...(this.config || {}),
                    };
                    const editor = window.DocsAPI.DocEditor(id, initConfig);
                    window.DocEditor.instances[id] = editor;
                } catch (err) {
                    console.error(err);
                    this.events_onError(err);
                }
            },
            onAppReady() {
                const id = this.id || '';
                this.events_onAppReady(window.DocEditor.instances[id]);
            },
            onChangeProps() {
                const id = this.id || '';
                if (window?.DocEditor?.instances[id]) {
                    window.DocEditor.instances[id].destroyEditor();
                    window.DocEditor.instances[id] = undefined;
 
                    console.log('Important props have been changed. Load new Editor.');
                    this.onLoad();
                }
            },
        },
    };
</script> 
<style lang="scss" module="s">
    .view {
        width: 100%;
        height: 100%;
 
        iframe {
            width: 100%;
            height: 100%;
        }
    }
</style>

loadScript.js文件：

const loadScript = async (url, id) =>
  new Promise((resolve, reject) => {
    try {
      if (document.getElementById(id)) {
        if (window.DocsAPI) return resolve(null);
 
        const intervalHandler = setInterval(() => {
          if (!window.DocsAPI) return;
 
          clearInterval(intervalHandler);
 
          return resolve(null);
        }, 500);
      } else {
        const script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("id", id);
 
        script.onload = resolve;
        script.onerror = reject;
 
        script.src = url;
        script.async = true;
 
        document.body.appendChild(script);
      }
    } catch (e) {
      console.error(e);
    }
  });
 
export default loadScript;

3. 然后可以创建一个页面并使用它

<template>
    <!-- onlyoffice展示 -->
    <div class='qualityManual-container'>
        <div class='qualityManual-container-office'>
            <vab-only-office id="office-preview" :documentServerUrl='documentServerUrl' :config="config" />
        </div>
    </div>
 
</template>
<script>
    import vabOnlyOffice from '@/components/docPreview/index.vue'
 
    export default {
        components: { vabOnlyOffice },
        data() {
            return {
                documentServerUrl: "http://xxx.xxx.xx.xx:xxxx/",
                config: {
                    document: {
                        fileType: "docx",
                        key: "Khirz6zTPdfd7",
                        title: "Example Document Title.docx",
                        url: "http://xxx.xxx.xxx.xx:xxx/xxxxx/xxxx?xxxx=new.docx"   // 文件地址
                    },
                    documentType: "word",
                    editorConfig: {
                        callbackUrl: "https://example.com/url-to-callback.ashx"
                    }
                }
            }
        },
        methods: {
            //这里的val是传递的参数
            loadOnlyOffice(val) {
                this.option.key =        // key 默认置空则不走缓存
                this.option.title = ''   // 该文件名在下载文档时也将用作文件名
                this.option.url =        // 定义存储原始查看或编辑的文档的绝对URL
                this.option.fileType = 'docx'                // 文件类型
                this.option.callbackUrl = ''                  // 回调地址
                this.show = true                        // 打开onlyOffice窗口
                console.log(val, '编辑word默认配置参数')
            },
        }
    }
</script>
 
<style rel="stylesheet/scss" lang="scss">
    .qualityManual-container {
        padding: 0 !important;
        width: 100%;
        height: calc(100vh - 180px);
    }
 
    .qualityManual-container-office {
        width: 100%;
        height: calc(100% - 55px);
    }
 
</style>