安裝axios

npm install axios

在項目中引入

?

import axios from 'axios';

1、get接口excel文件下載

const file_key = ref('')
const downLoadExcel = (value:any) => {//file_key.value = value axios({method: "get",url: "/api/da/download_excel/",//url: "/api/da/download_excel/" + file_key.value + "/",//帶參數params: params.value,responseType: "blob",headers: {Authorization: "Bearer "+sessionStorage.getItem("token"),'Cache-Control': 'no-cache','Pragma': 'no-cache',},}).then((res) => {const blob = new Blob([res.data]);let contentDisposition = res.headers["content-disposition"];// let fileName = window.decodeURI(//   contentDisposition.substring(contentDisposition.indexOf("=") + 1)// );let fileName = 'downLoad.xlsx';const elink = document.createElement("a"); // 創建a標簽elink.download = fileName; // 為a標簽添加download屬性elink.style.display = "none";elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click(); // 點擊下載URL.revokeObjectURL(elink.href); // 釋放URL 對象document.body.removeChild(elink); // 釋放標簽message.success('下載成功')}).catch((error) => {message.error('下載失敗')});
}

2、get 下載 rar 文件

const downLoadRar = () => {axios({method: "get",url: "/api/dl/downloadmodel/",responseType: "blob",headers: {Authorization: "Bearer "+sessionStorage.getItem("token"),},}).then((res) => {const blob = new Blob([res.data], { type: 'application/x-rar-compressed' });let contentDisposition = res.headers["content-disposition"];let fileName = '下載文件.rar';if (contentDisposition) { // 如果響應頭中包含文件名信息，則解析出來const regex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;const matches = regex.exec(contentDisposition);if (matches != null && matches[1]) {fileName = matches[1].replace(/['"]/g, '');}}const elink = document.createElement("a"); // 創建a標簽elink.download = fileName; // 為a標簽添加download屬性elink.style.display = "none";elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click(); // 點擊下載URL.revokeObjectURL(elink.href); // 釋放URL 對象document.body.removeChild(elink);message.success('導出成功')}).catch((error) => {message.error('導出失敗')});
}

3、get下載 zip 文件

const downLoadZip = () => {axios({method: "get",url: "/api/download_file/",responseType: "blob",headers: {Authorization: "Bearer "+sessionStorage.getItem("token"),},}).then((res) => {const blob = new Blob([res.data], { type: 'application/zip' });let contentDisposition = res.headers["content-disposition"];let fileName = 'downloaded_file.zip'; // 默認文件名// 嘗試從響應頭中提取文件名，假設文件名包含中文或特殊字符時使用了UTF-8編碼if (contentDisposition && contentDisposition.indexOf('filename') !== -1) {const regex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;const matches = regex.exec(contentDisposition);if (matches != null && matches[1]) {fileName = decodeURIComponent(matches[1].trim().replace(/['"]/g, ''));}}const elink = document.createElement("a"); // 創建a標簽elink.download = fileName; // 為a標簽添加download屬性elink.style.display = "none";elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click(); // 點擊下載URL.revokeObjectURL(elink.href); // 釋放URL 對象document.body.removeChild(elink); // 釋放標簽message.success('導出成功')}).catch((error) => {message.error('導出失敗')});
}

post 下載

const downLoad = () => {axios({method: "post",url: "/api/download_file/",responseType: "blob",headers: {Authorization: "Bearer "+sessionStorage.getItem("token"),},//post 參數data: {file_key: data.filename}}).then((res) => {//下載zipconst blob = new Blob([res.data], { type: 'application/zip' });//下載rar//const blob = new Blob([res.data], { type: 'application/x-rar-compressed' });//下載excel// const blob = new Blob([res.data]);let contentDisposition = res.headers["content-disposition"];let fileName = 'downloaded_file.zip'; // 默認文件名// 嘗試從響應頭中提取文件名，假設文件名包含中文或特殊字符時使用了UTF-8編碼if (contentDisposition && contentDisposition.indexOf('filename') !== -1) {const regex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;const matches = regex.exec(contentDisposition);if (matches != null && matches[1]) {fileName = decodeURIComponent(matches[1].trim().replace(/['"]/g, ''));}}const elink = document.createElement("a"); // 創建a標簽elink.download = fileName; // 為a標簽添加download屬性elink.style.display = "none";elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click(); // 點擊下載URL.revokeObjectURL(elink.href); // 釋放URL 對象document.body.removeChild(elink); // 釋放標簽message.success('導出成功')}).catch((error) => {message.error('導出失敗')});
}