Vue前端导出、下载zip/excel文件流blob

// import &＃39;./mock/index.js&＃39;; // 该项目所有请求使用mockjs模拟 去掉mock

responseType: "blob",   

let blob &＃61; new Blob([response.data], { type: "application/zip" }); //注意是response 或者 response.data
let url &＃61; window.URL.createObjectURL(blob);  这三句最重要&＃xff01;&＃xff01;&＃xff01;

//普通代码
axios.post(postUrl, params, {responseType: &＃39;arraybuffer&＃39;}).then(res &＃61;> {// 创建Blob对象&＃xff0c;设置文件类型let blob &＃61; new Blob([res.data], {type: "application/vnd.ms-excel"})let objectUrl &＃61; URL.createObjectURL(blob) // 创建URLlocation.href &＃61; objectUrl;URL.revokeObjectURL(objectUrl); // 释放内存
})

downloadAll() {axios({method: "get",url: "api/TemplateDownload/GetAllTemplateZIP",headers: {"content-type": "application/json; charset&＃61;utf-8",Authorization: COOKIEs.get("token") || "",},responseType: "blob",}).then((response) &＃61;> {let blob &＃61; new Blob([response.data], { type: "application/zip" });let url &＃61; window.URL.createObjectURL(blob);const link &＃61; document.createElement("a"); // 创建a标签link.href &＃61; url;link.download &＃61; "模板下载"; // 重命名文件link.click();URL.revokeObjectURL(url); // 释放内存this.checkList &＃61; [];}).catch((error) &＃61;> {console.log(error.data);});},//excel
let blob &＃61; new Blob([response.data], { type: "application/vnd.ms-excel" });dl() {axios({method: "get",url: "http://10.180.170.3:8794/tRptMwStdClt/exportData?time&＃61;202104",responseType: "arraybuffer",}).then((response) &＃61;> {console.log(response);let blob &＃61; new Blob([response.data], {type: "application/vnd.ms-excel",});let url &＃61; window.URL.createObjectURL(blob);const link &＃61; document.createElement("a"); // 创建a标签link.href &＃61; url;link.download &＃61; "模板下载"; // 重命名文件link.click();URL.revokeObjectURL(url); // 释放内存this.checkList &＃61; [];}).catch((error) &＃61;> {console.log(error.data);});},

获取到了后台传过来的excel文件 前端用vue怎么接收并导出&＃xff1f; - 中文 - Vue Forum

vue.js前端实现excel表格导出和获取headers里的信息 - 五个半柠檬 - OSCHINA - 中文开源技术交流社区

java后台需要设置

response.addHeader("Content-Disposition", "attachment;filename&＃61;" &＃43; fileName &＃43; ".xlsx");response.setHeader("Access-Control-Expose-Headers","Content-Disposition");才能获取到文件名等信息

// 导出execel2handleExcel() {this.$http({url: this.$http.adornUrl(url),method: "post",responseType: "blob",//!!!!params: this.$http.adornParams({userAccount: this.userName,}),}).then((res) &＃61;> {// console.log(res, "res");let blob &＃61; new Blob([res.data], { type: "application/vnd.ms-excel" });let fileName &＃61; decodeURI(response.headers["content-disposition"].split(";")[1].split("&＃61;")[1]);let url &＃61; window.URL.createObjectURL(blob);const link &＃61; document.createElement("a"); // 创建a标签link.href &＃61; url;link.download &＃61; fileName; // 重命名文件link.click();URL.revokeObjectURL(url); // 释放内存});},