Vue 前端通过 Get 和 Post 方法调用后台接口下载文件的实用集合

小焱写作

发布于 2025-09-04 08:37:57

17000

代码可运行

运行总次数：0

代码可运行

代码教程

下面是整合后的技术方案与应用实例，主要围绕Vue调用下载接口并实现文件下载功能展开。

一、Vue调用下载接口的技术方案

1. 基于Blob对象的文件下载方案

当后端返回的是文件流时，可以通过Blob对象处理并实现文件下载。这种方案的核心是利用JavaScript的Blob对象创建二进制文件，然后通过URL.createObjectURL生成临时URL供用户下载。

// 下载文件的核心函数
async function downloadFile(url, fileName, params = {}, method = 'get') {
  try {
    // 发送请求获取文件流
    const response = await axios({
      url,
      method,
      data: params, // 对于POST请求
      params, // 对于GET请求
      responseType: 'blob' // 关键配置：指定响应类型为blob
    });
    
    // 获取响应头中的文件名（如果有）
    const contentDisposition = response.headers['content-disposition'];
    if (contentDisposition && !fileName) {
      const fileNameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
      if (fileNameMatch && fileNameMatch[1]) {
        fileName = decodeURIComponent(fileNameMatch[1]);
      }
    }
    
    // 创建Blob对象
    const blob = new Blob([response.data], { 
      type: response.headers['content-type'] || 'application/octet-stream' 
    });
    
    // 创建临时URL
    const blobUrl = URL.createObjectURL(blob);
    
    // 创建a标签并触发下载
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = fileName || 'file.dat';
    link.click();
    
    // 释放资源
    URL.revokeObjectURL(blobUrl);
    
    return true;
  } catch (error) {
    console.error('下载文件失败', error);
    return false;
  }
}

2. 基于iframe的文件下载方案

对于某些特殊场景（如需要保留浏览器历史记录或处理跨域问题），可以使用iframe来实现文件下载。

// 使用iframe下载文件
function downloadFileByIframe(url, params = {}) {
  // 创建隐藏的iframe
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  
  // 处理GET请求参数
  let paramStr = '';
  if (params && Object.keys(params).length > 0) {
    paramStr = '?' + Object.entries(params)
      .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
      .join('&');
  }
  
  iframe.src = url + paramStr;
  
  // 添加到文档中
  document.body.appendChild(iframe);
  
  // 一段时间后移除iframe
  setTimeout(() => {
    document.body.removeChild(iframe);
  }, 60000); // 60秒后移除
}

3. 处理不同类型的文件下载

根据不同的文件类型，可能需要调整请求头或响应处理方式。

// 处理Excel文件下载
async function downloadExcel(url, fileName, params) {
  return downloadFile(url, fileName, params, {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    }
  });
}

// 处理PDF文件下载
async function downloadPDF(url, fileName, params) {
  return downloadFile(url, fileName, params, {
    headers: {
      'Accept': 'application/pdf'
    }
  });
}

二、应用实例

1. 简单文件下载组件

下面是一个简单的Vue组件，演示如何使用上述方案实现文件下载：

<template>
  <div class="download-container">
    <button 
      @click="handleDownload" 
      :disabled="loading"
      class="download-button"
    >
      <span v-if="loading">下载中...</span>
      <span v-else>下载文件</span>
    </button>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  </div>
</template>

<script>
export default {
  name: 'FileDownloader',
  props: {
    // 下载接口URL
    downloadUrl: {
      type: String,
      required: true
    },
    // 下载文件名
    fileName: {
      type: String,
      default: ''
    },
    // 请求方法
    method: {
      type: String,
      default: 'get',
      validator: value => ['get', 'post'].includes(value)
    },
    // 请求参数
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      errorMessage: ''
    }
  },
  methods: {
    async handleDownload() {
      this.loading = true;
      this.errorMessage = '';
      
      try {
        // 根据method选择不同的请求方式
        let success;
        if (this.method === 'get') {
          success = await this.downloadByGet();
        } else {
          success = await this.downloadByPost();
        }
        
        if (!success) {
          this.errorMessage = '下载失败，请重试';
        }
      } catch (error) {
        this.errorMessage = '下载过程中发生错误';
        console.error('下载错误', error);
      } finally {
        this.loading = false;
      }
    },
    
    async downloadByGet() {
      try {
        // 对于GET请求，将参数拼接到URL
        let paramStr = '';
        if (this.params && Object.keys(this.params).length > 0) {
          paramStr = '?' + Object.entries(this.params)
            .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
            .join('&');
        }
        
        const response = await axios({
          url: this.downloadUrl + paramStr,
          method: 'get',
          responseType: 'blob'
        });
        
        return this.saveFile(response);
      } catch (error) {
        console.error('GET下载失败', error);
        return false;
      }
    },
    
    async downloadByPost() {
      try {
        const response = await axios({
          url: this.downloadUrl,
          method: 'post',
          data: this.params,
          responseType: 'blob'
        });
        
        return this.saveFile(response);
      } catch (error) {
        console.error('POST下载失败', error);
        return false;
      }
    },
    
    saveFile(response) {
      try {
        // 获取文件名
        let fileName = this.fileName;
        const contentDisposition = response.headers['content-disposition'];
        if (contentDisposition && !fileName) {
          const fileNameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
          if (fileNameMatch && fileNameMatch[1]) {
            fileName = decodeURIComponent(fileNameMatch[1]);
          }
        }
        
        // 创建Blob对象
        const blob = new Blob([response.data], { 
          type: response.headers['content-type'] || 'application/octet-stream' 
        });
        
        // 创建临时URL
        const blobUrl = URL.createObjectURL(blob);
        
        // 创建a标签并触发下载
        const link = document.createElement('a');
        link.href = blobUrl;
        link.download = fileName || 'file.dat';
        link.click();
        
        // 释放资源
        URL.revokeObjectURL(blobUrl);
        
        return true;
      } catch (error) {
        console.error('保存文件失败', error);
        return false;
      }
    }
  }
}
</script>

<style scoped>
.download-button {
  padding: 8px 16px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.download-button:hover {
  background-color: #66B1FF;
}

.download-button:disabled {
  background-color: #C0C4CC;
  cursor: not-allowed;
}

.error-message {
  color: #F56C6C;
  margin-top: 8px;
  font-size: 14px;
}
</style>

2. 高级文件下载组件（带进度条）

对于大文件下载，可以添加进度条显示下载进度：

<template>
  <div class="download-container">
    <button 
      @click="startDownload" 
      :disabled="loading || completed"
      class="download-button"
    >
      {{ buttonText }}
    </button>
    
    <div v-if="showProgress" class="progress-container">
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
      <div class="progress-text">{{ progress }}%</div>
    </div>
    
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    <div v-if="completed" class="success-message">下载完成</div>
  </div>
</template>

<script>
export default {
  name: 'ProgressFileDownloader',
  props: {
    downloadUrl: {
      type: String,
      required: true
    },
    fileName: {
      type: String,
      default: ''
    },
    method: {
      type: String,
      default: 'get',
      validator: value => ['get', 'post'].includes(value)
    },
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      completed: false,
      progress: 0,
      showProgress: false,
      errorMessage: '',
      controller: null
    }
  },
  computed: {
    buttonText() {
      if (this.loading) return '下载中...';
      if (this.completed) return '已完成';
      return '开始下载';
    }
  },
  methods: {
    async startDownload() {
      this.loading = true;
      this.completed = false;
      this.progress = 0;
      this.showProgress = true;
      this.errorMessage = '';
      
      // 创建AbortController用于取消请求
      this.controller = new AbortController();
      const signal = this.controller.signal;
      
      try {
        let response;
        if (this.method === 'get') {
          response = await axios({
            url: this.downloadUrl,
            method: 'get',
            params: this.params,
            responseType: 'blob',
            signal,
            // 监听下载进度
            onDownloadProgress: progressEvent => {
              if (progressEvent.total) {
                this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
              }
            }
          });
        } else {
          response = await axios({
            url: this.downloadUrl,
            method: 'post',
            data: this.params,
            responseType: 'blob',
            signal,
            onDownloadProgress: progressEvent => {
              if (progressEvent.total) {
                this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
              }
            }
          });
        }
        
        this.saveFile(response);
        this.completed = true;
      } catch (error) {
        if (error.name !== 'AbortError') {
          this.errorMessage = '下载失败，请重试';
          console.error('下载错误', error);
        }
      } finally {
        this.loading = false;
        this.controller = null;
      }
    },
    
    cancelDownload() {
      if (this.controller) {
        this.controller.abort();
        this.loading = false;
        this.errorMessage = '下载已取消';
      }
    },
    
    saveFile(response) {
      try {
        let fileName = this.fileName;
        const contentDisposition = response.headers['content-disposition'];
        if (contentDisposition && !fileName) {
          const fileNameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
          if (fileNameMatch && fileNameMatch[1]) {
            fileName = decodeURIComponent(fileNameMatch[1]);
          }
        }
        
        const blob = new Blob([response.data], { 
          type: response.headers['content-type'] || 'application/octet-stream' 
        });
        
        const blobUrl = URL.createObjectURL(blob);
        
        const link = document.createElement('a');
        link.href = blobUrl;
        link.download = fileName || 'file.dat';
        link.click();
        
        URL.revokeObjectURL(blobUrl);
      } catch (error) {
        console.error('保存文件失败', error);
        this.errorMessage = '保存文件失败';
      }
    }
  }
}
</script>

<style scoped>
.download-button {
  padding: 8px 16px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.download-button:hover {
  background-color: #66B1FF;
}

.download-button:disabled {
  background-color: #C0C4CC;
  cursor: not-allowed;
}

.progress-container {
  margin-top: 16px;
  height: 20px;
  background-color: #f3f3f3;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background-color: #409EFF;
  transition: width 0.3s;
}

.progress-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #333;
}

.error-message {
  color: #F56C6C;
  margin-top: 8px;
  font-size: 14px;
}

.success-message {
  color: #67C23A;
  margin-top: 8px;
  font-size: 14px;
}
</style>

三、使用示例

1. 在Vue组件中使用简单下载组件

<template>
  <div class="app-container">
    <h3>用户数据导出</h3>
    
    <FileDownloader
      :downloadUrl="apiUrl"
      :params="queryParams"
      fileName="用户数据.xlsx"
    />
  </div>
</template>

<script>
import FileDownloader from '@/components/FileDownloader.vue';

export default {
  components: {
    FileDownloader
  },
  data() {
    return {
      apiUrl: '/api/export/users',
      queryParams: {
        startTime: '2023-01-01',
        endTime: '2023-12-31',
        status: 'active'
      }
    }
  }
}
</script>

2. 使用高级下载组件（带进度条）

<template>
  <div class="app-container">
    <h3>大数据报表下载</h3>
    
    <ProgressFileDownloader
      :downloadUrl="apiUrl"
      fileName="年度销售报表.xlsx"
      :params="reportParams"
    />
  </div>
</template>

<script>
import ProgressFileDownloader from '@/components/ProgressFileDownloader.vue';

export default {
  components: {
    ProgressFileDownloader
  },
  data() {
    return {
      apiUrl: '/api/reports/annual-sales',
      reportParams: {
        year: 2023,
        department: 'all'
      }
    }
  }
}
</script>

四、注意事项与优化建议

跨域问题
- 如果下载接口与前端应用不在同一个域名下，需要确保后端配置了正确的CORS头
- 例如：Access-Control-Allow-Origin: * 或指定具体的前端域名
文件类型处理
- 确保后端在响应头中正确设置 Content-Type 和 Content-Disposition
- 常见文件类型的Content-Type：
  - Excel: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
  - PDF: application/pdf
  - Word: application/vnd.openxmlformats-officedocument.wordprocessingml.document
错误处理
- 网络错误：捕获axios请求异常并显示友好提示
- 文件损坏：验证响应内容长度或使用MD5/SHA校验
- 权限问题：处理403状态码，跳转到登录页面或显示权限不足提示
性能优化
- 对于大文件下载，考虑使用分块下载和断点续传
- 添加下载进度显示，提升用户体验
- 使用节流函数避免频繁更新进度UI
兼容性考虑
- 对于不支持Blob和URL.createObjectURL的旧浏览器（如IE10及以下），需要提供备选方案
- 可以考虑使用FileSaver.js等第三方库增强兼容性