diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 4e4556a689f..e857fc25e63 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -12,6 +12,7 @@
 - 菜单新增 tag 显示，支持 4 中类型颜色及 dot 圆点显示
 - 新增菜单及顶栏颜色选择配色
 - 增加示例结果页
+- 新增文件下载示例
 
 ### ⚡ Wip
 
diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
index 669e1b9683a..9655f7b4782 100644
--- a/src/components/registerGlobComp.ts
+++ b/src/components/registerGlobComp.ts
@@ -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)
diff --git a/src/router/menus/modules/demo/feat.ts b/src/router/menus/modules/demo/feat.ts
index ca09716d9d7..d923fa18144 100644
--- a/src/router/menus/modules/demo/feat.ts
+++ b/src/router/menus/modules/demo/feat.ts
@@ -4,6 +4,9 @@ const menu: MenuModule = {
   menu: {
     name: '功能',
     path: '/feat',
+    tag: {
+      dot: true,
+    },
     children: [
       {
         path: 'icon',
@@ -17,6 +20,13 @@ const menu: MenuModule = {
         path: 'context-menu',
         name: '右键菜单',
       },
+      {
+        path: 'download',
+        name: '文件下载',
+        tag: {
+          content: 'new',
+        },
+      },
       {
         path: 'click-out-side',
         name: 'ClickOutSide',
diff --git a/src/router/routes/modules/demo/feat.ts b/src/router/routes/modules/demo/feat.ts
index ba5c834c064..6b16f829a39 100644
--- a/src/router/routes/modules/demo/feat.ts
+++ b/src/router/routes/modules/demo/feat.ts
@@ -40,6 +40,14 @@ const feat: AppRouteModule = {
         title: '右键菜单',
       },
     },
+    {
+      path: '/download',
+      name: 'DownLoadDemo',
+      component: () => import('/@/views/demo/feat/download/index.vue'),
+      meta: {
+        title: '文件下载',
+      },
+    },
     {
       path: '/click-out-side',
       name: 'ClickOutSideDemo',
diff --git a/src/utils/file/FileDownload.ts b/src/utils/file/FileDownload.ts
index 9a10c0a3143..bb0d369de21 100644
--- a/src/utils/file/FileDownload.ts
+++ b/src/utils/file/FileDownload.ts
@@ -25,6 +25,7 @@ export function downloadByData(data: BlobPart, filename: string, mime?: string,
     window.URL.revokeObjectURL(blobURL);
   }
 }
+
 /**
  * 根据文件地址下载文件
  * @param {*} sUrl
diff --git a/src/views/demo/feat/download/index.vue b/src/views/demo/feat/download/index.vue
new file mode 100644
index 00000000000..2b404ab1fa9
--- /dev/null
+++ b/src/views/demo/feat/download/index.vue
@@ -0,0 +1,32 @@
+<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>