office测试页面

src/views/util/test.vue

@@ -1,45 +1,103 @@
 <template>
-  <div>
-    1111111111
-    <basic-container>
-    测试12
-    <el-date-picker
-      v-model="value1"
-      type="datetime"
-      value-format="yyyy-MM-dd HH:mm:ss"
-      format="yyyy-MM-dd HH:mm:ss"
-      placeholder="选择日期时间">
-    </el-date-picker>
-    </basic-container>
+ <div style="height: 80%;">
+    <!-- OnlyOffice 编辑器容器 -->
+    <button @click="saveDocument">保存文档</button>
+    <div ref="editorContainer" id="editorContainer" style="height: 600px;"></div>
+
+    <!-- 外部按钮触发保存事件 -->
+ 
   </div>
 </template>
 
 <script>
 export default {
-  data () {
+  data() {
     return {
-      value1: '',
-      // src: 'http://IP/web-apps/apps/api/documents/api.js',
-       src: 'http://47.98.223.222:8090/web-apps/apps/api/documents/api.js',
-      editorConfig: {
-        document: {
-          fileType: 'cell',
-          key: 'key.docx',
-          title: '测试.docx',
-          url: 'https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20220916/0cb657b0f5b70eeac8b8d5fbab86d00c.xlsx'
-       
-        },
-        editorConfig: {
-          callbackUrl: 'http://47.98.223.222:8090/web-apps/apps/api/v1/onlyoffice/callback'
-        }
-      }
-    }
+      editor: null,
+    };
+  },
+  mounted() {
+    // 在组件挂载后初始化 OnlyOffice 编辑器
+      this.initOnlyOfficeEditor();
+      console.log( this.editor.events,'event');
+      this.editor.events.on('documentSave', () => {
+        console.log('Document saved');
+      });
+ 
   },
   methods: {
-    // 编辑器加载完毕后回调 ready 函数，editor 为当前编辑器实例
-    onReady (editor) {}
-  }
-}
+    initOnlyOfficeEditor() {
+      let config = {
+          document: {
+            //后缀
+            fileType: 'xlsx',
+            key: '',
+            title: '1111e',
+            permissions: {
+              edit: true,//是否可以编辑: 只能查看，传false
+              print: true,
+              download: true,
+              "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
+              "review": true //跟踪变化
+            },
+            url:'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20231013/1ec4228aa3b7e1a01d1516e7081ac46d.xlsx',
+          },
+          documentType:'spreadsheet',
+          editorConfig: {
+            callbackUrl:"http://47.110.251.215:8090/blade-manager/exceltab/callbackSave",//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
+            lang: 'zh-CN',//语言设置
+            //定制
+            customization: {
+              autosave: true,//是否自动保存
+              chat: false,
+              forcesave:true,//开启手动保存
+              comments: false,
+              help: true,
+              hideRightMenu:true,
+              // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
+              //是否显示插件
+              plugins: false,
+            },
+            user:{
+            id:111,
+            name:'',
+          },
+          mode:'edit',
+          },
+          width: '100%',
+          height: '100%',
+         
+        }
+      // 初始化 OnlyOffice 编辑器
+      this.editor = new DocsAPI.DocEditor('editorContainer',config);
+
+      // 在初始化后加载文档等操作
+      // ...
+      var saveButton = document.getElementById("slot-btn-dt-save");
+    console.log(saveButton,'saveButton');
+      // 监听 OnlyOffice 编辑器的事件（如果需要）
+      console.log(  this.editor,'  this.editor');
+   
+    },
+    saveDocument() {
+      // 调用 OnlyOffice 编辑器的保存方法
+      this.editor.save((result) => {
+        if (result) {
+          // 保存成功的处理逻辑
+          console.log("文档已成功保存");
+        } else {
+          // 保存失败的处理逻辑
+          console.error("保存失败");
+        }
+      });
+    },
+    handleDocumentSave() {
+      // 处理文档保存事件（可选）
+      console.log("文档保存事件触发");
+    },
+     
+  },
+};
 </script>
 <style scoped="scoped" lang="scss">
 </style>