Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.4.5",
+  "version": "5.4.6",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

playground/src/locales/langs/en-US/demos.json

@@ -49,7 +49,8 @@
     "fullScreen": "FullScreen",
     "clipboard": "Clipboard",
     "menuWithQuery": "Menu With Query",
-    "openInNewWindow": "Open in New Window"
+    "openInNewWindow": "Open in New Window",
+    "fileDownload": "File Download"
   },
   "breadcrumb": {
     "navigation": "Breadcrumb Navigation",

playground/src/locales/langs/zh-CN/demos.json

@@ -49,7 +49,8 @@
     "fullScreen": "全屏",
     "clipboard": "剪贴板",
     "menuWithQuery": "带参菜单",
-    "openInNewWindow": "新窗口打开"
+    "openInNewWindow": "新窗口打开",
+    "fileDownload": "文件下载"
   },
   "breadcrumb": {
     "navigation": "面包屑导航",

playground/src/router/routes/modules/demos.ts

@@ -177,6 +177,16 @@ const routes: RouteRecordRaw[] = [
               title: $t('demos.features.fullScreen'),
             },
           },
+          {
+            name: 'FileDownloadDemo',
+            path: '/demos/features/file-download',
+            component: () =>
+              import('#/views/demos/features/file-download/index.vue'),
+            meta: {
+              icon: 'lucide:hard-drive-download',
+              title: $t('demos.features.fileDownload'),
+            },
+          },
           {
             name: 'ClipboardDemo',
             path: '/demos/features/clipboard',

playground/src/views/demos/features/file-download/index.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+import {
+  downloadFileFromBase64,
+  downloadFileFromBlobPart,
+  downloadFileFromImageUrl,
+  downloadFileFromUrl,
+} from '@vben/utils';
+
+import { Button, Card } from 'ant-design-vue';
+
+import imageBase64 from './base64';
+</script>
+
+<template>
+  <Page title="文件下载示例">
+    <Card title="根据文件地址下载文件">
+      <Button
+        type="primary"
+        @click="
+          downloadFileFromUrl({
+            source:
+              'https://codeload.github.com/vbenjs/vue-vben-admin-doc/zip/main',
+            target: '_self',
+          })
+        "
+      >
+        Download File
+      </Button>
+    </Card>
+
+    <Card class="my-5" title="根据地址下载图片">
+      <Button
+        type="primary"
+        @click="
+          downloadFileFromImageUrl({
+            source:
+              'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+            fileName: 'vben-logo.png',
+          })
+        "
+      >
+        Download File
+      </Button>
+    </Card>
+
+    <Card class="my-5" title="base64流下载">
+      <Button
+        type="primary"
+        @click="
+          downloadFileFromBase64({
+            source: imageBase64,
+            fileName: 'image.png',
+          })
+        "
+      >
+        Download Image
+      </Button>
+    </Card>
+    <Card class="my-5" title="文本下载">
+      <Button
+        type="primary"
+        @click="
+          downloadFileFromBlobPart({
+            source: 'text content',
+            fileName: 'test.txt',
+          })
+        "
+      >
+        Download TxT
+      </Button>
+    </Card>
+  </Page>
+</template>