onlyoffice在线编辑

2024-03-18 17:53:14 +08:00
parent b1810b835a
commit 9948c9ed04
12 changed files with 1371 additions and 82 deletions
@@ -0,0 +1,121 @@
+<template>
+    <div style="width: 100%;height: 100%;">
+        <div id="placeholder"></div>
+    </div>
+</template>
+
+<script>
+import { getOnlyoffice, saveOnlyOfficeFile } from "@/api/onlyoffice/onlyoffice"
+import store from "@/store"
+import axios from 'axios'
+export default {
+    props: [],
+    data() {
+        return {
+            config: {},
+            flag: 0,
+            userId: store.getters.userId,
+            websock: null
+        };
+    },
+    destroyed() {
+        //页面销毁时关闭ws连接
+        if (this.websock) {
+            this.websock.close() // 关闭websocket
+        }
+    },
+    methods: {
+        getConfig(id) {
+            let edit = edit;
+            if (this.flag == 0) {
+                edit = 'view';
+            } else {
+                edit = 'edit'
+            }
+            axios.get(`http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true`).then(res => {
+                this.config = res.data;
+                // this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`;
+                console.log(res.data,"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO");
+                var docEditor = new DocsAPI.DocEditor("placeholder", this.config);
+            })
+        },
+        //初始化weosocket
+        initWebSocket() {
+            if (typeof (WebSocket) === "undefined") {
+                alert("您的浏览器不支持WebSocket")
+                return false
+            }
+            const wsuri = `ws://121.40.189.20:9090/api/websocket/${this.userId}` // websocket地址
+            this.websock = new WebSocket(wsuri)
+            this.websock.onopen = this.websocketonopen
+            this.websock.onmessage = this.websocketonmessage
+            this.websock.onerror = this.websocketonerror
+            this.websock.onclose = this.websocketclose
+        },
+        //连接成功
+        websocketonopen() {
+            console.log('WebSocket连接成功')
+        },
+        //接收后端返回的数据
+        websocketonmessage(e) {
+            let dataJson = e.data;
+            if (dataJson != "conn_success") {
+                dataJson = JSON.parse(dataJson);
+            }
+            if (dataJson.caseId) {
+                saveOnlyOfficeFile({
+                    caseAppliId: Number(dataJson.caseId),
+                    annexName: dataJson.fileName,
+                    annexPath: dataJson.filePath,
+                    onlyOfficeFileId: dataJson.fileId
+                }).then(res => {
+                    this.websock.send()
+                })
+            }
+            // 在这里使用后端返回的数据，对数据进行处理渲染
+        },
+        //连接建立失败重连
+        websocketonerror(e) {
+            console.log(`连接失败的信息：`, e)
+            this.initWebSocket() // 连接失败后尝试重新连接
+        },
+        //关闭连接
+        websocketclose(e) {
+            console.log('断开连接', e)
+        },
+        // 点击按钮
+        // btnClick() {
+        //     // 因为需求是每次点击都是发起不同ws连接，拿到的数据也不一致，所以连接前要先断开上次的连接
+        //     if (this.websock) {
+        //         this.websock.close() // 关闭websocket连接
+        //     }
+        //     this.initWebSocket() // 初始化weosocket，发起连接
+        //     // 这里使用定时器是为了等待连接后才发送数据，避免错误
+        //     setTimeout(() => {
+        //         //添加状态判断，当为OPEN时，前端发送消息给后端
+        //         if (this.websock.readyState === 1) {
+        //             // 把后台需要的参数数据传过去
+        //             let obj = {
+        //                 jobId: 111,
+        //                 token: 'xxxxx',
+        //                 message: 'send ok'
+        //             }
+        //             //发给后端的数据需要字符串化
+        //             this.websock.send(JSON.stringify(obj))
+        //         }
+        //     }, 500)
+        // }
+    },
+    mounted() {
+        let id = this.$route.query.id;
+        this.flag = this.$route.query.flag;
+        this.getConfig(id);
+        this.initWebSocket();
+        console.log(this.userId, "PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP");
+    },
+    watch: {
+
+    }
+};
+</script>
+<style lang="scss" scoped></style>