增加文件预览示例

package.json

@@ -25,6 +25,9 @@
     "@imengyu/vue3-context-menu": "^1.4.2",
     "@tinymce/tinymce-vue": "^6.0.1",
     "@visactor/vchart": "^1.11.10",
+    "@vue-office/docx": "^1.6.2",
+    "@vue-office/excel": "^1.7.11",
+    "@vue-office/pdf": "^2.0.2",
     "@vueuse/components": "^10.11.1",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",

pnpm-lock.yaml

@@ -29,6 +29,15 @@ importers:
       '@visactor/vchart':
         specifier: ^1.11.10
         version: 1.11.10
+      '@vue-office/docx':
+        specifier: ^1.6.2
+        version: 1.6.2(vue-demi@0.14.10(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
+      '@vue-office/excel':
+        specifier: ^1.7.11
+        version: 1.7.11(vue-demi@0.14.10(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
+      '@vue-office/pdf':
+        specifier: ^2.0.2
+        version: 2.0.2(vue-demi@0.14.10(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
       '@vueuse/components':
         specifier: ^10.11.1
         version: 10.11.1(vue@3.4.35(typescript@5.5.4))
@@ -2564,6 +2573,36 @@ packages:
   '@volar/typescript@2.4.0-alpha.18':
     resolution: {integrity: sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==}
 
+  '@vue-office/docx@1.6.2':
+    resolution: {integrity: sha512-OHAoUHeY8nHjhWvwDhlPx+/rmRkxmqLpvPgtfCEOZ4H1c1LCdJ6eDbdV3152ww8dcdZ7fgGQu3fmSSaI7JwdpQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      vue: ^2.0.0 || >=3.0.0
+      vue-demi: ^0.14.6
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  '@vue-office/excel@1.7.11':
+    resolution: {integrity: sha512-LF3R9IV573Sf4qTu6Ik5Ee8UMfkrsZQ6HEQE25/2m1c0CMcHX6KanIy6Cz0b0Q+FrLH3TjIsLTm6oPcqAbDGSA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      vue: ^2.0.0 || >=3.0.0
+      vue-demi: ^0.14.6
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  '@vue-office/pdf@2.0.2':
+    resolution: {integrity: sha512-bQFqGxSOnKbvCS7OoJniYoTz1VIm1XOrRD27Msorxny9NFJ8RsQK1A4uhlnISJRFMaUwp1qlcVE9jMAhsiIyjg==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      vue: ^2.0.0 || >=3.0.0
+      vue-demi: ^0.14.6
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@vue/babel-helper-vue-transform-on@1.2.2':
     resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
 
@@ -10055,6 +10094,21 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
+  '@vue-office/docx@1.6.2(vue-demi@0.14.10(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      vue: 3.4.35(typescript@5.5.4)
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+
+  '@vue-office/excel@1.7.11(vue-demi@0.14.10(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      vue: 3.4.35(typescript@5.5.4)
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+
+  '@vue-office/pdf@2.0.2(vue-demi@0.14.10(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      vue: 3.4.35(typescript@5.5.4)
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+
   '@vue/babel-helper-vue-transform-on@1.2.2': {}
 
   '@vue/babel-plugin-jsx@1.2.2(@babel/core@7.24.7)':

src/router/modules/plugin.example.ts

@@ -157,6 +157,15 @@ const routes: RouteRecordRaw = {
         icon: 'i-mdi:table-large',
       },
     },
+    {
+      path: 'file-preview',
+      name: 'pluginExampleFilePreview',
+      component: () => import('@/views/plugin_example/file-preview.vue'),
+      meta: {
+        title: '文件预览',
+        icon: 'i-mdi:file-eye-outline',
+      },
+    },
   ],
 }
 

src/views/plugin_example/file-preview.vue

@@ -0,0 +1,50 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script lang="ts" setup>
+import VueOfficeDocx from '@vue-office/docx'
+import '@vue-office/docx/lib/index.css'
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import VueOfficePdf from '@vue-office/pdf'
+import Alert from './components/alert.vue'
+
+const docx = ref('http://static.shanhuxueyuan.com/test6.docx')
+const excel = ref('http://static.shanhuxueyuan.com/demo/excel.xlsx')
+const pdf = ref('http://static.shanhuxueyuan.com/test.pdf')
+
+function open(url: string) {
+  window.open(url, '_blank')
+}
+</script>
+
+<template>
+  <div>
+    <Alert />
+    <PageHeader title="文件预览">
+      <template #content>
+        <p>支持docx、xlsx、pdf文件预览。</p>
+        <p style="margin-bottom: 0;">
+          安装命令：<ElTag>pnpm add @vue-office/docx @vue-office/excel @vue-office/pdf</ElTag>
+        </p>
+      </template>
+      <ElButton @click="open('https://github.com/501351981/vue-office')">
+        <template #icon>
+          <SvgIcon name="i-ep:link" />
+        </template>
+        访问 vue-office
+      </ElButton>
+    </PageHeader>
+    <PageMain title="docx文件预览">
+      <VueOfficeDocx :src="docx" style="height: 500px;" />
+    </PageMain>
+    <PageMain title="excel文件预览">
+      <VueOfficeExcel :src="excel" style="height: 500px;" />
+    </PageMain>
+    <PageMain title="pdf文件预览">
+      <VueOfficePdf :src="pdf" style="height: 500px;" />
+    </PageMain>
+  </div>
+</template>