fix: 显示配置

packages/preview-office-view/index.vue

@@ -2,17 +2,17 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-07-18 12:22:11
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-18 12:46:10
+ * @LastEditTime: 2023-08-22 01:57:45
  * @FilePath: \vue3\packages\preview-office-view\index.vue
  * @Description:
  *
 -->
 <template>
-  <div class="preview-office-view overflow-hidden h-full">
+  <div class="preview-office-view overflow-hidden h-100vh">
     <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" />
+      <VueOfficePdf v-else-if="extension === 'pdf'" class="h-full" :src="src" static-file-url="https://registry.npmmirror.com/pdfjs-dist/3.1.81/files/cmaps/" />
     </template>
     <el-empty v-else>
       <template #description>
@@ -29,14 +29,18 @@ import VueOfficeExcel from '@vue-office/excel'
 import '@vue-office/excel/lib/index.css'
 import '@vue-office/docx/lib/index.css'
 
-const route = useRoute()
+const props = defineProps<{
-const { url, extension } = route.query
+  /** 文件的url */
+  url?: string | string[]
+  /** 文件的拓展名 */
+  extension?: string
+}>()
 
 const src = computed(() => {
+  const { url } = props
   if (typeof url === 'string')
     return url
   if (Array.isArray(url))
     return url[0]
-  return ''
 })
 </script>

stories/PreviewOffice.stories.ts

@@ -1,3 +1,12 @@
+/*
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-21 00:29:39
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-08-22 02:11:14
+ * @FilePath: \vue3\stories\PreviewOffice.stories.ts
+ * @Description:
+ *
+ */
 import type { Meta, StoryObj } from '@storybook/vue3'
 import ThPreviewOffice from '../packages/preview-office/index.vue'
 
@@ -5,11 +14,23 @@ const meta = {
   title: '数据展示/Office预览/PreviewOffice',
   component: ThPreviewOffice,
   tags: ['autodocs'],
+  args: {
+    file: {
+      url: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx',
+      extension: 'docx',
+    },
+  },
+  parameters: {
+    file: {
+      url: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx',
+      extension: 'docx',
+    },
+  },
 } satisfies Meta<typeof ThPreviewOffice>
 export default meta
 
 type Story = StoryObj<typeof meta>
 
 export const Base: Story = {
-  name: '基本使用',
+  name: '搭配PreviewOfficeView组件使用',
 }

stories/PreviewOfficeView.stories.ts

@@ -2,23 +2,44 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-07-18 12:22:11
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-18 12:39:40
+ * @LastEditTime: 2023-08-22 02:08:24
  * @FilePath: \vue3\stories\PreviewOfficeView.stories.ts
  * @Description:
  *
  */
 import type { Meta, StoryObj } from '@storybook/vue3'
+
 import ThPreviewOfficeView from '../packages/preview-office-view/index.vue'
 
 const meta = {
   title: '数据展示/Office预览/PreviewOfficeView',
   component: ThPreviewOfficeView,
   tags: ['autodocs'],
+  args: {
+    url: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx',
+    extension: 'docx',
+  },
 } satisfies Meta<typeof ThPreviewOfficeView>
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Base: Story = {
+export const docx: Story = {
-  name: '基本使用',
+  name: 'Word文档（仅支持.docx）',
+}
+
+export const excel: Story = {
+  name: 'Excel表格（仅支持.xlsx）',
+  args: {
+    url: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx',
+    extension: 'xlsx',
+  },
+}
+
+export const pdf: Story = {
+  name: 'PDF文档',
+  args: {
+    url: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf',
+    extension: 'pdf',
+  },
 }