在 Vue 3 中，你可以使用 axios 或 fetch 來下載文件，并將 responseType 設置為 blob 以處理二進制數據。以下是一個使用 axios 的示例：

使用 axios 下載文件

1. 首先，確保你已經安裝了 axios：

   npm install axios
   

2. 然后在你的 Vue 組件中使用 axios 下載文件：

   <template><button @click="onDownloadClick">下載文件</button>
   </template><script>
   import { handleFileExport } from '@/utils/exportExcel';
   import { apiGetDownload } from '@/api/encouragementApi';export default {methods: {function onDownloadClick(row: any) {const response = await axios.get('https://example.com/path/to/file', {responseType: 'blob', // 重要：設置響應類型為 blob});.handleFileExport(response )setTimeout(() => {ElMessage.success("下載成功")}, 1000)}},
   };
   </script>
   

在utils/exportExcel.ts

// 后端接口導出 非同源的資源需要下載，可以將其轉換為Blob:Url
const handleFileExport = (res:any) => {
if(res.request.responseType==='blob'){let contentDisposition = res.headers['content-disposition']if (!contentDisposition) {contentDisposition = `;filename=${decodeURI(res.headers.filename)}`;}const fileName = window.decodeURI(contentDisposition.split(`filename=`)[1]);const blob = new Blob([res.data], {type: 'text/xlsx',});let downloadUrl = window.URL.createObjectURL(blob);let a = document.createElement('a');a.style.display = 'none';a.href = downloadUrl;a.download = fileName;let event = new MouseEvent('click');a.dispatchEvent(event);
}
};

使用a標簽下載

  const url = apiDownloadImportFileStr({encourageTypeId: 1})const link = document.createElement('a')link.href = urllink.click()

關鍵點

• responseType: 'blob'：這是告訴 axios 或 fetch 返回一個 Blob 對象，用于處理二進制數據。
• window.URL.createObjectURL：創建一個臨時的 URL，用于下載文件。

注意事項

• 確保服務器支持跨域請求（CORS），否則可能會遇到跨域問題。
• 如果文件較大，可能需要考慮分塊下載或顯示下載進度。

通過這些步驟，你可以在 Vue 3 中實現文件下載功能。