vue3 文件下载(excel/rar/zip)

安装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('导出失败')});
}