增加文件预览示例

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",

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>