feat: 组件

packages/preview-office/index.vue

@@ -0,0 +1,37 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-18 12:21:03
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-18 13:02:44
+ * @FilePath: \vue3\packages\preview-office\index.vue
+ * @Description:
+ *
+-->
+<template>
+  <iframe v-if="src" class="h-full w-full" title="Office预览" :src="src" />
+  <el-empty v-else />
+</template>
+
+<script lang="ts" setup name="ThPreviewOffice">
+const { file } = defineProps<{
+  /** 待预览的文件对象 */
+  file?: FileVO
+}>()
+
+const router = useRouter()
+
+const ALLOW_EXTENSION: (string | undefined)[] = ['docx', 'xlsx', 'pdf']
+
+const src = computed(() => {
+  if (!file || !ALLOW_EXTENSION.includes(file.extension))
+    return ''
+
+  return router.resolve({
+    name: 'preview-office',
+    query: {
+      url: file.url,
+      extension: file.extension,
+    },
+  }).href
+})
+</script>