wip: use weboffice

src/components/IFrame/src/IFrame.vue

@@ -9,10 +9,9 @@ const props = defineProps({
   },
 })
 const loading = ref(true)
-const height = ref('')
+const height = ref<string | number>('')
-const frameRef = ref<HTMLElement | null>(null)
+const frameRef = ref<null | HTMLIFrameElement>(null)
 function init() {
-  console.warn(height.value)
   if (!props.height)
     height.value = `${document.documentElement.clientHeight - 94.5}px`
   else
@@ -25,6 +24,24 @@ onMounted(() => {
     init()
   }, 300)
 })
+
+function sendMessageToIframe(message) {
+  if (frameRef.value && frameRef.value.contentWindow)
+    frameRef.value.contentWindow.postMessage(message, '*')
+}
+
+defineExpose({
+  sendMessageToIframe,
+})
+
+onMounted(() => {
+  // 监听响应
+  window.addEventListener('message', (event) => {
+    // 处理响应
+    if (event.data)
+      console.log(event.data)
+  })
+})
 </script>
 
 <template>

src/views/infra/filePreview/index.vue

@@ -17,10 +17,113 @@ onMounted(() => {
 })
 
 previewUrl.value = rouer.currentRoute.value.query?.url as string
+
+const iframeRef = ref<InstanceType<typeof IFrame> | null>(null)
+
+const isShow = ref(false)
+
+function sendMessage() {
+  if (iframeRef.value) {
+    iframeRef.value.sendMessageToIframe(JSON.stringify({
+      // MessageId: 'CallPythonScript',
+      // SendTime: Date.now(),
+      // Values: {
+      //   ScriptFile: 'InsertText.py',
+      //   Function: 'InsertHello',
+      //   Values: {
+      //
+      //   },
+      // },
+
+      MessageId: isShow.value ? 'Hide_StatusBar' : 'Show_StatusBar',
+      SendTime: Date.now(),
+      Values: {},
+
+      // Values: { Mimetype: 'text/plain;charset=utf-8', Data: 'foo' },
+    }))
+
+    isShow.value = !isShow.value
+  }
+}
+
+function findAllBookmark() {
+  if (iframeRef.value) {
+    iframeRef.value.sendMessageToIframe(JSON.stringify({
+      MessageId: 'CallPythonScript',
+      SendTime: Date.now(),
+      ScriptFile: 'BookmarkQuery.py',
+      Function: 'FindAllBookmarks',
+      // Values: { text: { type: 'string', value: '111222' } },
+    }))
+  }
+}
+
+function handleDoReplaceBookmark() {
+  if (iframeRef.value) {
+    iframeRef.value.sendMessageToIframe(JSON.stringify({
+      MessageId: 'CallPythonScript',
+      SendTime: Date.now(),
+      ScriptFile: 'BookmarkExec.py',
+      Function: 'ReplaceBookmark',
+      Values: { param: { type: 'string', value: JSON.stringify(
+        {
+          text: {
+            row1: `${Date.now()}_row_1`,
+            row2: `${Date.now()}_row_2`,
+            h1: `${Date.now()}_h1`,
+          },
+          table: [
+            {
+              tableIndex: 0,
+              loopRowIndex: 1,
+              data: [
+                {
+                  c1: '11',
+                  c2: '12',
+                  c3: '13',
+                  c4: '14',
+                },
+                {
+                  c1: '21',
+                  c2: '22',
+                  c3: '23',
+                  c4: '24',
+                },
+              ],
+            },
+          ],
+        },
+      ) } },
+    }))
+  }
+}
+
+function readEvent() {
+  if (iframeRef.value) {
+    iframeRef.value.sendMessageToIframe(JSON.stringify({
+      MessageId: 'Host_PostmessageReady',
+      SendTime: Date.now(),
+    }))
+  }
+}
 </script>
 
 <template>
   <div>
-    <i-frame v-if="previewUrl" :src="previewUrl" />
+    <div>
+      <a-button @click="readEvent">
+        readEvent
+      </a-button>
+      <a-button @click="sendMessage">
+        Send Message
+      </a-button>
+      <a-button @click="findAllBookmark">
+        findAllBookmark
+      </a-button>
+      <a-button @click="handleDoReplaceBookmark">
+        Replace
+      </a-button>
+    </div>
+    <i-frame v-if="previewUrl" ref="iframeRef" :src="previewUrl" />
   </div>
 </template>