vue2 集成 Onlyoffice_vue onlyoffice

最新推荐文章于 2024-07-06 16:47:02 发布

2401_85124621

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量837

点赞数 16

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_85124621/article/details/139581555

版权

五、安装docker

a、windows安装：Windows10 Docker 安装教程-CSDN博客

b、mac安装：【云原生丶Docker】MacOS系统安装Docker【保姆级教程】_mac安装docker-CSDN博客

六、通过docker安装Onlyoffice

1、使用JWT验证

sudo docker run -i -t -d -p 8701:80 onlyoffice/documentserver

2、不使用JWT验证

sudo docker run -i -t -d -p 8701:80 --restart=always -e JWT_ENABLED=false onlyoffice/documentserver

可以以后面加上版本号：
sudo docker run -i -t -d -p 8701:80 --restart=always -e JWT_ENABLED=false onlyoffice/documentserver:7.1.1

-e JWT_ENABLED=false：不使用JWT

sudo docker run -i -t -d -p 8701:80 --restart=always --name=onlyoffice_7.3.3 -e JWT_ENABLED=false onlyoffice/documentserver:7.3.3

从7.2版本起，默认使用了JWT功能，安装Onlyoffice时，可以通过不同的命令参数启动服务，默认不使用JWT验证！如果是第 1 次执行这个命令，会先去下载 Onlyoffice，比较慢，约等待 3~10 分钟，网络畅通一点的会快一些。如果是已经安装过则直接进行启动。待其安装完成：

安装完成后：

七、启动服务

1、等上述安装完成后执行命令，查看 Onlyoffice 容器 ID：

docker ps

2、执行以下命令进入容器，这里将获取到的 ID 替换为上个步骤你得到的自己的ID！

sudo docker exec -it ID /bin/bash

3、接着执行下面的这两个命令

# 启动所有的内置服务
supervisorctl restart all
# 退出容器
exit

命令输出如下：

4、最后访问 http://IP:8701/welcome 页面（网上其他人说IP 不能是 localhost 或 127.0.0.1，一定要用你自己本地真实 IP 来访问。但是我经过测试完全可以），看到下面的这个效果说明 Onlyoffice 启动成功。

此页面提供了在线文档新增、编辑等功能，你可以点击生成一个文档，后续开发测试功能时会用到。

八、在 Vue 中接入 Onlyoffice

1、子组件准备，在你的项目的合适目录下新建如下两个文件，将下方的代码复制粘贴进去到你对应的文件中。

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);


### 最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。



**96道前端面试题：**

- ![](https://img-blog.csdnimg.cn/img_convert/13edd77b638f601cd77f961d171e10fe.webp?x-oss-process=image/format,png)

**常用算法面试题：**

- ![](https://img-blog.csdnimg.cn/img_convert/cacd5e8c3cc0de23795467ce789cd35c.webp?x-oss-process=image/format,png)

**前端基础面试题：**
内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化**

                 console.error(err);


### 最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。



**96道前端面试题：**

- [外链图片转存中...(img-VGRrHw5J-1718021750325)]

**常用算法面试题：**

- [外链图片转存中...(img-AvJqmHoq-1718021750326)]

**前端基础面试题：**
内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化**

- ![](https://img-blog.csdnimg.cn/img_convert/6550c5dfa25a5328291a18e2f2854022.webp?x-oss-process=image/format,png)