快捷導(dǎo)航

Vue前端通過Get和Post方法調(diào)用后臺(tái)接口下載文件的應(yīng)用實(shí)例

更新時(shí)間：2025年06月11日 10:30:53 作者：小焱寫作

Vue調(diào)用接口的具體實(shí)現(xiàn)方式有多種,這篇文章主要介紹了Vue前端通過Get和Post方法調(diào)用后臺(tái)接口下載文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

下面是整合后的技術(shù)方案與應(yīng)用實(shí)例，主要圍繞Vue調(diào)用下載接口并實(shí)現(xiàn)文件下載功能展開。

一、Vue調(diào)用下載接口的技術(shù)方案

1. 基于Blob對(duì)象的文件下載方案

當(dāng)后端返回的是文件流時(shí)，可以通過Blob對(duì)象處理并實(shí)現(xiàn)文件下載。這種方案的核心是利用JavaScript的Blob對(duì)象創(chuàng)建二進(jìn)制文件，然后通過URL.createObjectURL生成臨時(shí)URL供用戶下載。

// 下載文件的核心函數(shù)
async function downloadFile(url, fileName, params = {}, method = 'get') {
  try {
    // 發(fā)送請(qǐng)求獲取文件流
    const response = await axios({
      url,
      method,
      data: params, // 對(duì)于POST請(qǐng)求
      params, // 對(duì)于GET請(qǐng)求
      responseType: 'blob' // 關(guān)鍵配置：指定響應(yīng)類型為blob
    });
    
    // 獲取響應(yīng)頭中的文件名（如果有）
    const contentDisposition = response.headers['content-disposition'];
    if (contentDisposition && !fileName) {
      const fileNameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
      if (fileNameMatch && fileNameMatch[1]) {
        fileName = decodeURIComponent(fileNameMatch[1]);
      }
    }
    
    // 創(chuàng)建Blob對(duì)象
    const blob = new Blob([response.data], { 
      type: response.headers['content-type'] || 'application/octet-stream' 
    });
    
    // 創(chuàng)建臨時(shí)URL
    const blobUrl = URL.createObjectURL(blob);
    
    // 創(chuàng)建a標(biāo)簽并觸發(fā)下載
    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的文件下載方案

對(duì)于某些特殊場(chǎng)景（如需要保留瀏覽器歷史記錄或處理跨域問題），可以使用iframe來實(shí)現(xiàn)文件下載。

// 使用iframe下載文件
function downloadFileByIframe(url, params = {}) {
  // 創(chuàng)建隱藏的iframe
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  
  // 處理GET請(qǐng)求參數(shù)
  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);
  
  // 一段時(shí)間后移除iframe
  setTimeout(() => {
    document.body.removeChild(iframe);
  }, 60000); // 60秒后移除
}

3. 處理不同類型的文件下載

根據(jù)不同的文件類型，可能需要調(diào)整請(qǐng)求頭或響應(yīng)處理方式。

// 處理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'
    }
  });
}

二、應(yīng)用實(shí)例

1. 簡(jiǎn)單文件下載組件

下面是一個(gè)簡(jiǎn)單的Vue組件，演示如何使用上述方案實(shí)現(xiàn)文件下載：

<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: ''
    },
    // 請(qǐng)求方法
    method: {
      type: String,
      default: 'get',
      validator: value => ['get', 'post'].includes(value)
    },
    // 請(qǐng)求參數(shù)
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      errorMessage: ''
    }
  },
  methods: {
    async handleDownload() {
      this.loading = true;
      this.errorMessage = '';
      
      try {
        // 根據(jù)method選擇不同的請(qǐng)求方式
        let success;
        if (this.method === 'get') {
          success = await this.downloadByGet();
        } else {
          success = await this.downloadByPost();
        }
        
        if (!success) {
          this.errorMessage = '下載失敗，請(qǐng)重試';
        }
      } catch (error) {
        this.errorMessage = '下載過程中發(fā)生錯(cuò)誤';
        console.error('下載錯(cuò)誤', error);
      } finally {
        this.loading = false;
      }
    },
    
    async downloadByGet() {
      try {
        // 對(duì)于GET請(qǐng)求，將參數(shù)拼接到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]);
          }
        }
        
        // 創(chuàng)建Blob對(duì)象
        const blob = new Blob([response.data], { 
          type: response.headers['content-type'] || 'application/octet-stream' 
        });
        
        // 創(chuàng)建臨時(shí)URL
        const blobUrl = URL.createObjectURL(blob);
        
        // 創(chuàng)建a標(biāo)簽并觸發(fā)下載
        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. 高級(jí)文件下載組件（帶進(jìn)度條）

對(duì)于大文件下載，可以添加進(jìn)度條顯示下載進(jìn)度：

<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 = '';
      
      // 創(chuàng)建AbortController用于取消請(qǐng)求
      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,
            // 監(jiān)聽下載進(jìn)度
            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 = '下載失敗，請(qǐng)重試';
          console.error('下載錯(cuò)誤', 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組件中使用簡(jiǎn)單下載組件

<template>
  <div class="app-container">
    <h3>用戶數(shù)據(jù)導(dǎo)出</h3>
    
    <FileDownloader
      :downloadUrl="apiUrl"
      :params="queryParams"
      fileName="用戶數(shù)據(jù).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. 使用高級(jí)下載組件（帶進(jìn)度條）

<template>
  <div class="app-container">
    <h3>大數(shù)據(jù)報(bào)表下載</h3>
    
    <ProgressFileDownloader
      :downloadUrl="apiUrl"
      fileName="年度銷售報(bào)表.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>

四、注意事項(xiàng)與優(yōu)化建議

跨域問題
- 如果下載接口與前端應(yīng)用不在同一個(gè)域名下，需要確保后端配置了正確的CORS頭
- 例如：Access-Control-Allow-Origin: * 或指定具體的前端域名
文件類型處理
- 確保后端在響應(yīng)頭中正確設(shè)置 Content-Type 和 Content-Disposition
- 常見文件類型的Content-Type：
  - Excel: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
  - PDF: application/pdf
  - Word: application/vnd.openxmlformats-officedocument.wordprocessingml.document
錯(cuò)誤處理
- 網(wǎng)絡(luò)錯(cuò)誤：捕獲axios請(qǐng)求異常并顯示友好提示
- 文件損壞：驗(yàn)證響應(yīng)內(nèi)容長(zhǎng)度或使用MD5/SHA校驗(yàn)
- 權(quán)限問題：處理403狀態(tài)碼，跳轉(zhuǎn)到登錄頁(yè)面或顯示權(quán)限不足提示
性能優(yōu)化
- 對(duì)于大文件下載，考慮使用分塊下載和斷點(diǎn)續(xù)傳
- 添加下載進(jìn)度顯示，提升用戶體驗(yàn)
- 使用節(jié)流函數(shù)避免頻繁更新進(jìn)度UI
兼容性考慮
- 對(duì)于不支持Blob和URL.createObjectURL的舊瀏覽器（如IE10及以下），需要提供備選方案
- 可以考慮使用FileSaver.js等第三方庫(kù)增強(qiáng)兼容性

總結(jié)

到此這篇關(guān)于Vue前端通過Get和Post方法調(diào)用后臺(tái)接口下載文件的文章就介紹到這了,更多相關(guān)Vue調(diào)用后臺(tái)接口下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: