feat: 下载组件

package.json

@@ -56,6 +56,7 @@
     "@tsconfig/node18": "^2.0.1",
     "@types/co": "^4.6.3",
     "@types/ejs": "^3.1.2",
+    "@types/file-saver": "^2.0.5",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^20.3.1",
     "@vitejs/plugin-vue": "^4.1.0",
@@ -72,6 +73,7 @@
     "element-plus": "^2.3.6",
     "eslint": "^8.43.0",
     "fast-glob": "^3.2.12",
+    "file-saver": "^2.0.5",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",

packages/download-link/index.vue

@@ -0,0 +1,96 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-21 01:21:34
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-21 01:51:17
+ * @FilePath: \vue3\packages\download-link\index.vue
+ * @Description: 现在组件
+ *
+-->
+<template>
+  <el-link v-loading="loading" :href="url" :type="type" :download="url && fileName" @click="download">
+    <slot>
+      {{ fileName }}
+    </slot>
+  </el-link>
+</template>
+
+<script lang="ts" setup name="ThDownloadLink">
+import { saveAs } from 'file-saver'
+
+const props = withDefaults(defineProps<{
+  /**
+   * 自定义下载文件名
+   *
+   */
+  fileName?: string
+  /**
+   * 下载文件的请求源
+   *
+   * 可以是文件名或URL。
+   *
+   */
+  src?: number | string | FileVO
+  /** 下载文件的请求参数的健名 */
+  requestKey?: string
+  /** 下载文件的请求函数 */
+  request?: (...args: any) => Promise<Blob>
+}>(), {
+  fileName: '文件',
+  requestKey: 'fileName',
+  request: () => {
+    throw new Error('请定义下载接口的请求函数')
+  },
+})
+
+let url = $ref('')
+let loading = $ref(false)
+
+let type = $ref<'success' | 'primary' | 'danger'>('primary')
+
+async function downloadByRequest(fileName: string | number) {
+  if (url || loading)
+    return
+  loading = true
+  try {
+    const res = await props.request({ [props.requestKey]: fileName })
+    url = URL.createObjectURL(res)
+    saveAs(res)
+  }
+  catch (error) {
+    type = 'danger'
+  }
+  finally {
+    type = 'success'
+    loading = false
+  }
+}
+
+function download() {
+  switch (typeof props.src) {
+    case 'string':
+      if (props.src.startsWith('http')) {
+        url = props.src
+        break
+      }
+      downloadByRequest(props.src)
+      break
+    case 'number':
+      downloadByRequest(props.src)
+      break
+    case 'object':
+      if (typeof props.src?.url === 'string')
+        downloadByRequest(props.src.url)
+      break
+    default:
+      break
+  }
+}
+
+tryOnUnmounted(() => {
+  if (url.startsWith('blob:')) {
+  // revoke object URL after use to avoid memory leak.
+    URL.revokeObjectURL(url)
+  }
+})
+</script>

stories/DownloadLink.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ThDownloadLink from '../packages/download-link/index.vue'
+
+const meta = {
+  title: '数据展示/DownloadLink',
+  component: ThDownloadLink,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ThDownloadLink>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  name: '基本使用',
+}

yarn.lock

@@ -2914,6 +2914,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/file-saver@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/@types/file-saver/-/file-saver-2.0.5.tgz#9ee342a5d1314bb0928375424a2f162f97c310c7"
+  integrity sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==
+
 "@types/find-cache-dir@^3.2.1":
   version "3.2.1"
   resolved "https://registry.npmmirror.com/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz#7b959a4b9643a1e6a1a5fe49032693cc36773501"
@@ -5517,6 +5522,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 file-system-cache@^2.0.0:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/file-system-cache/-/file-system-cache-2.3.0.tgz#201feaf4c8cd97b9d0d608e96861bb6005f46fe6"