Vue3+TypeScript+ Element Plus 实现文件下载，无后端（点击按钮，下载静态文件）

在 Vue 3 + TypeScript + Element Plus 项目中实现点击下载静态文件，可以通过以下两种常用方式实现。这里假设你的静态文件存放在 public 目录（推荐）或 src/assets 目录中：

---

方法 1：直接使用  标签下载（推荐）

适用场景：文件位于 public 目录（构建时会被直接复制到 dist 根目录）

vue

复制

下载

---

方法 2：通过 import 导入文件（适用于 src/assets）

适用场景：文件位于 src/assets 目录（需要构建处理）

vue

复制

下载

---

关键说明：

1. 文件存放位置

   • public/ 目录：适合无需构建的静态文件（如图片、PDF、ZIP等）

     • 文件路径直接使用 /文件名.后缀

     • 文件在构建时会被原样复制到 dist 根目录

   • src/assets/ 目录：适合需要构建处理的文件（如通过 webpack/Vite 优化）

     • 使用 import 文件?url 语法获取最终路径（Vite 项目）

     • Webpack 项目需配置 file-loader

2. Vite 特殊配置
   在 vite.config.ts 中确保静态资源处理：

   ts

   复制

   下载

   // vite.config.ts
   export default defineConfig({
     assetsInclude: ['**/*.pdf', '**/*.zip'], // 添加需要支持的文件类型
   })

3. Element Plus 图标使用
   按需导入图标（在 main.ts 中）：

   ts

   复制

   下载

   import { Download, Document } from '@element-plus/icons-vue'
   app.component('ElIconDownload', Download)
   app.component('ElIconDocument', Document)

---

完整项目结构示例：

text

复制

下载

public/
  ├─ sample.pdf    // 直接通过 /sample.pdf 访问
src/
  ├─ assets/
  │   └─ document.pdf  // 通过 import + ?url 导入
  ├─ components/
  │   └─ DownloadButton.vue

注意事项：

• 浏览器可能会阻止跨域资源的自动下载

• 大文件下载时建议添加加载提示（使用 Element Plus 的 ElLoading）

• 确保服务器正确配置 MIME 类型（如 .pdf 文件需配置 application/pdf）

通过以上方法，你可以灵活地根据文件存储位置选择适合的下载实现方式。