Vue Vben Admin 中优雅实现文件下载功能

在 Vue Vben Admin 项目中，文件下载是一个常见的业务需求。本文将深入探讨如何在该框架中优雅地实现文件下载功能，包括从后端获取文件数据到前端触发下载的完整流程。

核心实现方案

Vue Vben Admin 提供了两种主要的文件下载方式：

1. Blob 方式下载：通过获取文件的二进制数据流，在前端创建 Blob 对象并触发下载
2. 直接响应方式：直接从后端获取文件响应，处理后触发下载

代码实现详解

Blob 方式下载

export function downloadFile(response, filename) {
  // 从响应头解析文件名
  const contentDisposition = response.headers['content-disposition'];
  if (contentDisposition) {
    const filenameMatch = contentDisposition.match(
      /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
    );
    if (filenameMatch && filenameMatch[1]) {
      filename = decodeURIComponent(filenameMatch[1].replaceAll(/['"]/g, ''));
    }
  }

  // 创建 Blob 对象
  const blob = new Blob([response.data], { type: 'application/octet-stream' });

  // 创建下载链接
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.style.display = 'none';

  // 触发下载
  document.body.append(link);
  link.click();

  // 清理资源
  link.remove();
  URL.revokeObjectURL(url);
}

直接响应方式

在 Vue Vben Admin 的示例代码中，可以直接调用 API 获取文件响应：

const getBlob = async () => {
  const res = await downloadApi.getBlob();
  downloadFile(res, 'example.txt');
};

技术要点解析

1. 文件名处理：从响应头的 content-disposition 中提取文件名，确保下载的文件名与后端一致
2. Blob 对象创建：将响应数据转换为 Blob 对象，指定正确的 MIME 类型
3. 下载触发机制：通过动态创建隐藏的 <a> 标签并模拟点击来实现下载
4. 资源清理：下载完成后及时释放 URL 对象，避免内存泄漏

最佳实践建议

1. 统一封装：建议将下载功能封装成公共方法，方便项目各处调用
2. 错误处理：添加适当的错误处理逻辑，如网络请求失败、文件不存在等情况
3. 用户体验：可以添加下载进度提示和完成通知，提升用户体验
4. 大文件处理：对于大文件下载，考虑实现分片下载或断点续传功能

通过 Vue Vben Admin 提供的这些文件下载方案，开发者可以轻松实现各种复杂的文件下载需求，同时保持代码的整洁和可维护性。