feat: 组件

packages/preview-office-view/index.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-18 12:22:11
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-18 12:46:10
+ * @FilePath: \vue3\packages\preview-office-view\index.vue
+ * @Description:
+ *
+-->
+<template>
+  <div class="preview-office-view overflow-hidden h-full">
+    <template v-if="src">
+      <VueOfficeDocx v-if="extension === 'docx'" class="h-full" :src="src" />
+      <VueOfficeExcel v-else-if="extension === 'xlsx'" class="h-full" :src="src" />
+      <VueOfficePdf v-else-if="extension === 'pdf'" class="h-full" :src="src" />
+    </template>
+    <el-empty v-else>
+      <template #description>
+        暂不支持.{{ extension }}格式的文件
+      </template>
+    </el-empty>
+  </div>
+</template>
+
+<script lang="ts" setup name="ThPreviewOfficeView">
+import VueOfficePdf from '@vue-office/pdf'
+import VueOfficeDocx from '@vue-office/docx'
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import '@vue-office/docx/lib/index.css'
+
+const route = useRoute()
+const { url, extension } = route.query
+
+const src = computed(() => {
+  if (typeof url === 'string')
+    return url
+  if (Array.isArray(url))
+    return url[0]
+  return ''
+})
+</script>