vue2 使用 get 下載 Excel

axios#

import axios from 'axios';

// 定義下載Excel文件的函數
function downloadExcel() {
  axios.get('http://example.com/download-excel', {
    responseType: 'blob', // 指定響應數據類型為Blob
  })
    .then(response => {
      // 創建一個臨時的URL對象
      const url = URL.createObjectURL(new Blob([response.data]));

      // 創建一個a標籤，並設置其屬性
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'filename.xlsx'); // 指定下載的文件名

      // 將a標籤添加到文檔中，並模擬點擊下載
      document.body.appendChild(link);
      link.click();

      // 清理臨時URL對象
      URL.revokeObjectURL(url);
    })
    .catch(error => {
      console.error('下載Excel文件時出錯:', error);
    });
}

在上面的示例中，我們使用 axios 發送 GET 請求，並設置響應類型為 blob，以便接收二進制數據。然後，將響應的二進制數據轉換為 Blob 對象，並創建一個臨時 URL 對象。接下來，創建一個 a 標籤，設置其 href 屬性為臨時 URL，同時指定下載的文件名。將 a 標籤添加到文檔中，模擬點擊該標籤來觸發文件下載。最後，清理臨時 URL 對象以釋放資源。

請確保將示例中的 URL（http://example.com/download-excel）替換為您實際的下載 Excel 文件的 URL，並根據需要修改文件名（filename.xlsx）。

fetch#

以下是一個使用 fetch 的示例代碼：

fetch('http://example.com/download-excel', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 設置文件類型為Excel
  }
})
  .then(response => response.blob())
  .then(blob => {
    // 創建一個臨時的URL對象
    const url = URL.createObjectURL(blob);

    // 創建一個a標籤，並設置其屬性
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.xlsx'; // 指定下載的文件名

    // 將a標籤添加到文檔中，並模擬點擊下載
    document.body.appendChild(link);
    link.click();

    // 清理臨時URL對象
    URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('下載Excel文件時出錯:', error);
  });

在上面的示例中，我們使用 fetch 發送 GET 請求，並設置請求頭的 Content-Type 為 Excel 文件的 MIME 類型。然後通過 response.blob () 方法將響應轉換為 Blob 對象，最後創建一個臨時 URL 對象，並將其設置為 a 標籤的 href 屬性。接下來，模擬點擊該 a 標籤，從而觸發文件下載。最後，清理臨時 URL 對象以釋放資源。

請確保將示例中的 URL（http://example.com/download-excel）替換為您實際的下載 Excel 文件的 URL，並根據需要修改文件名（filename.xlsx）和請求頭中的文件類型。