Vue.js中前端如何處理從后端返回的Excel文件流詳解

更新時間：2025年01月16日 10:49:32 作者：清風南歸

這篇文章主要介紹了如何在Vue項目中使用axios處理后端返回的Excel文件流,并提供下載功能,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

目的：

頁面中點擊按鈕實現(xiàn)下載excel文件

步驟：

向后端發(fā)送請求：使用 axios（或其他 HTTP 客戶端）向后端發(fā)送請求以獲取文件。通常，文件會以 Blob 形式返回。
處理響應(yīng)數(shù)據(jù)：將響應(yīng)數(shù)據(jù)（Blob 對象）處理為下載鏈接，并模擬點擊以觸發(fā)下載。

具體步驟：

1. 安裝 axios（如果還未安裝）

npm install axios

2. 編寫 Vue 組件

<template>
  <div>
    <button @click="downloadExcel">下載 Excel</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadExcel() {
      try {
        const response = await axios({
          url: '/api/path-to-your-excel-file', // 替換為實際的請求 URL
          method: 'GET',
          responseType: 'blob', // 重要：指定響應(yīng)類型為 blob
        });

        // 創(chuàng)建一個新的 URL 對象，并生成一個下載鏈接
        const url = window.URL.createObjectURL(new Blob([response.data],
        { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', '文件名.xlsx'); // 設(shè)置下載的文件名
        link.style.display = 'none' // 隱藏元素
        document.body.appendChild(link);
        link.click();
        
        // 清理 DOM 和釋放 URL 對象
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      } catch (error) {
        console.error('下載文件時出錯:', error);
      }
    }
  }
}
</script>

<style scoped>
/* 樣式代碼 */
</style>

備注1：

在Vue中處理后端返回的Excel文件流以供下載，可以通過以下步驟進行：

設(shè)置請求的響應(yīng)類型‌：當后端以流文件的方式返回文件時，前端在請求時需要設(shè)置responseType: 'blob'，以確保正確接收和處理文件流。這是因為Blob對象可以表示一段二進制數(shù)據(jù)，用于處理二進制文件，如Excel文件‌。
‌創(chuàng)建下載鏈接‌：一旦接收到Blob數(shù)據(jù)，可以通過創(chuàng)建一個臨時的URL來觸發(fā)下載。使用window.URL.createObjectURL(blob)方法可以創(chuàng)建一個表示該Blob對象的臨時URL，然后創(chuàng)建一個<a>標簽，設(shè)置其href屬性為這個臨時URL，并設(shè)置download屬性為期望的文件名，模擬點擊這個<a>標簽即可開始下載‌。
‌處理不同的請求方法‌：根據(jù)后端接口的要求，請求方法可能是POST或GET。如果是POST請求，需要在請求頭中設(shè)置responseType: 'blob'。如果是GET請求，則通常不需要顯式設(shè)置響應(yīng)類型，因為默認就是獲取數(shù)據(jù)‌。
‌兼容性考慮‌：雖然可以通過上述方法處理和下載文件，但不同的瀏覽器和下載方式（如通過<a>標簽或window.location）有不同的兼容性。例如，通過<a>標簽下載的方式在Firefox和Chrome中表現(xiàn)良好，但不支持IE和Safari。而通過window.location進行下載雖然簡單，但只能進行GET請求，且在有token校驗的情況下使用不便‌。
注意事項‌：在處理流文件時，需要注意文件的完整性和正確性。如果文件損壞，可能是因為請求時沒有設(shè)置正確的響應(yīng)類型，導致文件無法正確解析和打開‌。

綜上所述，處理Vue中后端返回的Excel文件流涉及正確的請求設(shè)置、臨時URL的創(chuàng)建、兼容性考慮以及注意事項，以確保文件能夠正確下載和使用。

備注2：

type 是在創(chuàng)建 Blob 對象時的一個選項，用來指定 Blob 數(shù)據(jù)的 MIME 類型。MIME 類型（Multipurpose Internet Mail Extensions type）是用來描述文件格式的標準方式，它幫助瀏覽器或其他應(yīng)用程序了解如何處理該文件。

在你的例子中：

const blob = new Blob([response], 
{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

response 是你的數(shù)據(jù)內(nèi)容（通常是從服務(wù)器獲得的原始數(shù)據(jù)）。
type 是指定 Blob 對象的 MIME 類型。

解釋 type 的值

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 是一個 MIME 類型，用于標識 Microsoft Excel 的 .xlsx 文件格式。

為什么需要指定 MIME 類型

瀏覽器處理：瀏覽器根據(jù) MIME 類型決定如何處理或展示 Blob。如果沒有指定 MIME 類型，瀏覽器可能無法正確識別文件類型，可能會導致下載或展示時出現(xiàn)問題。
文件處理：正確的 MIME 類型有助于確保文件以正確的方式被處理和下載。例如，當你下載 Excel 文件時，指定 MIME 類型可以確保文件被正確地識別為 Excel 文件。
下載和展示：如果你的應(yīng)用需要處理多種文件格式，指定 MIME 類型可以確保文件的處理和展示方式是正確的。

常見的 MIME 類型

文本文件：text/plain
HTML 文件：text/html
JSON 文件：application/json
CSV 文件：text/csv
Excel 文件：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
PDF 文件：application/pdf