feat: add file download demo

vben
1 parent 1d45617e
Showing 6 changed files with 54 additions and 0 deletions
CHANGELOG.zh_CN.md
src/components/registerGlobComp.ts
src/router/menus/modules/demo/feat.ts
src/router/routes/modules/demo/feat.ts
src/utils/file/FileDownload.ts
src/views/demo/feat/download/index.vue
@@ -12,6 +12,7 @@
 - 菜单新增 tag 显示，支持 4 中类型颜色及 dot 圆点显示
 - 新增菜单及顶栏颜色选择配色
 - 增加示例结果页
+- 新增文件下载示例
 ### ⚡ Wip
@@ -6,6 +6,7 @@ import {
   // Optional
   Select,
+  Alert,
   Checkbox,
   DatePicker,
   Radio,
@@ -48,6 +49,7 @@ export function registerGlobComp() {
   // If you don’t need it, you can delete it
   getApp()
     .use(Select)
+    .use(Alert)
     .use(Checkbox)
     .use(DatePicker)
     .use(Radio)
@@ -4,6 +4,9 @@ const menu: MenuModule = {
   menu: {
     name: '功能',
     path: '/feat',
+    tag: {
+      dot: true,
+    },
     children: [
       {
         path: 'icon',
@@ -18,6 +21,13 @@ const menu: MenuModule = {
         name: '右键菜单',
       },
       {
+        path: 'download',
+        name: '文件下载',
+        tag: {
+          content: 'new',
+        },
+      },
+      {
         path: 'click-out-side',
         name: 'ClickOutSide',
       },
@@ -41,6 +41,14 @@ const feat: AppRouteModule = {
       },
     },
     {
+      path: '/download',
+      name: 'DownLoadDemo',
+      component: () => import('/@/views/demo/feat/download/index.vue'),
+      meta: {
+        title: '文件下载',
+      },
+    },
+    {
       path: '/click-out-side',
       name: 'ClickOutSideDemo',
       component: () => import('/@/views/demo/feat/click-out-side/index.vue'),
@@ -25,6 +25,7 @@ export function downloadByData(data: BlobPart, filename: string, mime?: string, 
     window.URL.revokeObjectURL(blobURL);
   }
 }
+
 /**
  * 根据文件地址下载文件
  * @param {*} sUrl
+<template>
+  <div class="m-5 demo-box">
+    <a-alert message="根据后台接口文件流下载" />
+    <a-button type="primary" class="my-4" @click="handleDownByData"> 文件流下载 </a-button>
+
+    <a-alert message="根据文件地址下载文件" />
+
+    <a-button type="primary" class="my-4" @click="handleDownloadByUrl"> 文件地址下载 </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { downloadByUrl, downloadByData } from '/@/utils/file/FileDownload';
+
+  export default defineComponent({
+    setup() {
+      function handleDownByData() {
+        downloadByData('text content', 'testName.txt');
+      }
+      function handleDownloadByUrl() {
+        downloadByUrl({
+          url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master',
+          target: '_self',
+        });
+      }
+      return {
+        handleDownloadByUrl,
+        handleDownByData,
+      };
+    },
+  });
+</script>