refactor: 自动获取文件对象

packages/download-link/index.vue

@@ -2,13 +2,13 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-07-21 01:21:34
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-22 12:46:07
+ * @LastEditTime: 2023-07-22 14:15:32
  * @FilePath: \vue3\packages\download-link\index.vue
  * @Description: 现在组件
  *
 -->
 <template>
-  <el-link v-loading="loading" :href="url" :type="type" :download="url && fileName" target="_blank" @click="download">
+  <el-link v-loading="loading" :href="url" :type="type" :download="url && fileName" target="_blank">
     <slot>
       {{ fileName }}
     </slot>
@@ -16,13 +16,7 @@
 </template>
 
 <script lang="ts" setup name="ThDownloadLink">
-import { saveAs } from 'file-saver'
-
 const props = withDefaults(defineProps<{
-  /**
-   * 自定义下载文件名
-   *
-   */
   fileName?: string
   /**
    * 下载文件的请求源
@@ -31,31 +25,29 @@ const props = withDefaults(defineProps<{
    *
    */
   src?: number | string | FileVO
-  /** 下载文件的请求参数的健名 */
+  /** 文件信息请求函数 */
-  requestKey?: string
+  request?: (...args: any) => Promise<FileVO>
-  /** 下载文件的请求函数 */
-  request?: (...args: any) => Promise<Blob>
 }>(), {
-  fileName: '文件',
+  fileName: '',
-  requestKey: 'fileName',
   request: () => {
     throw new Error('请定义下载接口的请求函数')
   },
 })
 
 let url = $ref('')
+let fileName = $ref('')
 let loading = $ref(false)
 
 let type = $ref<'success' | 'primary' | 'danger'>('primary')
 
-async function downloadByRequest(fileName: string | number) {
+async function reload(id: string | number) {
   if (url || loading)
     return
   loading = true
   try {
-    const res = await props.request({ [props.requestKey]: fileName })
+    const res = await props.request(id)
-    url = URL.createObjectURL(res)
+    url = res.url
-    saveAs(res)
+    fileName = res.name
   }
   catch (error) {
     type = 'danger'
@@ -66,23 +58,27 @@ async function downloadByRequest(fileName: string | number) {
   }
 }
 
-function download() {
+function init() {
   switch (typeof props.src) {
     case 'string':
       if (props.src.startsWith('http')) {
         url = props.src
+        fileName = props.fileName
         break
       }
-      downloadByRequest(props.src)
+      reload(props.src)
       break
     case 'number':
-      downloadByRequest(props.src)
+      reload(props.src)
       break
     case 'object':
       if (typeof props.src?.url === 'string') {
         url = props.src.url
+        fileName = props.src.name
         type = 'success'
-        saveAs(props.src.url, props.src.name)
+      }
+      else {
+        type = 'danger'
       }
       break
     default:
@@ -90,6 +86,8 @@ function download() {
   }
 }
 
+watch(() => props.src, init)
+
 tryOnUnmounted(() => {
   if (url.startsWith('blob:')) {
   // revoke object URL after use to avoid memory leak.

stories/DownloadLink.stories.ts

@@ -1,10 +1,34 @@
+/*
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-21 12:25:52
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-22 14:38:22
+ * @FilePath: \vue3\stories\DownloadLink.stories.ts
+ * @Description:
+ *
+ */
 import type { Meta, StoryObj } from '@storybook/vue3'
 import ThDownloadLink from '../packages/download-link/index.vue'
+import avatar from './assets/avatar.jpeg'
 
 const meta = {
   title: '数据展示/DownloadLink',
   component: ThDownloadLink,
   tags: ['autodocs'],
+  args: {
+    fileName: '文件名',
+    /**
+     * 下载文件的请求源
+     *
+     * 可以是文件名或URL。
+     *
+     */
+    src: '文件ID',
+    /** 文件信息请求函数 */
+    request: () => Promise.resolve({
+      url: avatar,
+    }),
+  },
 } satisfies Meta<typeof ThDownloadLink>
 export default meta