首页 网站教程 其它教程 正文
我要投稿

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

其它教程
2025-07-05 0 456 百度已收录
也想出现在这里？点击联系我~

代码教程

下面是整合后的技术方案与应用实例，主要围绕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>

四、注意事项与优化建议

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

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请不要用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"dtmb.taobao.com",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性

山喂资源分享 其它教程 Vue 前端通过 Get 和 Post 方法调用后台接口下载文件的实用集合 https://www.023140.com/610.html

Vue 前端通过 Get 和 Post 方法调用后台接口下载文件的实用集合
上一篇： Python爬虫（54）Python数据治理全攻略：从爬虫清洗到NLP情感分析的实战演进
Vue 前端通过 Get 和 Post 方法调用后台接口下载文件的实用集合
下一篇： Web 应用防火墙（WAF）配置指南：从原理到实战
也想出现在这里？点击联系我~
常见问题

免费下载或者VIP会员专享资源能否直接商用？

  • 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
查看详情

提示下载完但解压或打开不了？

  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或 联络我们.。
查看详情

相关文章

Vue 3 自定义指令实战：实现一个轻量级拖拽神器
Vue 3 自定义指令实战：实现一个轻量级拖拽神器
其它教程
4个月前 478
Web 应用防火墙（WAF）配置指南：从原理到实战
Web 应用防火墙（WAF）配置指南：从原理到实战
其它教程
4个月前 791
Vue 前端通过 Get 和 Post 方法调用后台接口下载文件的实用集合
Vue 前端通过 Get 和 Post 方法调用后台接口下载文件的实用集合
其它教程
4个月前 456
Python爬虫（54）Python数据治理全攻略：从爬虫清洗到NLP情感分析的实战演进
Python爬虫（54）Python数据治理全攻略：从爬虫清洗到NLP情感分析的实战演进
其它教程
4个月前 938
猜你喜欢
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
总裁主题

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
山喂资源分享

QQ交流群

您的支持，是我们最大的动力！
热门文章
热门评论
首页 售后支持 注册登录 免责声明