Vue 前端导出、下载zip excel文件流blob_vue new blob 大量数据(1)

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue.prototype.KaTeX parse error: Expected 'EOF', got '&' at position 62: …load?action=zip&̲filepath=' + …{localStorage.getItem(‘inmsToken’)}&accessToken=${localStorage.getItem(‘accessToken’)}`
}

responseType: "blob",   


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

//普通代码
axios.post(postUrl, params, {responseType: ‘arraybuffer’}).then(res => {
// 创建Blob对象，设置文件类型
let blob = new Blob([res.data], {type: “application/vnd.ms-excel”})
let objectUrl = URL.createObjectURL(blob) // 创建URL
location.href = objectUrl;
URL.revokeObjectURL(objectUrl); // 释放内存
})

downloadAll() {
axios({
method: “get”,
url: “api/TemplateDownload/GetAllTemplateZIP”,
headers: {
“content-type”: “application/json; charset=utf-8”,
Authorization: Cookies.get(“token”) || “”,
},
responseType: “blob”,
})
.then((response) => {
let blob = new Blob([response.data], { type: “application/zip” });
let url = window.URL.createObjectURL(blob);
const link = document.createElement(“a”); // 创建a标签
link.href = url;
link.download = “模板下载”; // 重命名文件
link.click();
URL.revokeObjectURL(url); // 释放内存
this.checkList = [];
})
.catch((error) => {
console.log(error.data);
});

},

//excel
let blob = new Blob([response.data], { type: “application/vnd.ms-excel” });

dl() {
axios({
method: “get”,
url: “http://10.180.170.3:8794/tRptMwStdClt/exportData?time=202104”,
responseType: “arraybuffer”,
})
.then((response) => {
console.log(response);
let blob = new Blob([response.data], {
type: “application/vnd.ms-excel”,
});
let url = window.URL.createObjectURL(blob);
const link = document.createElement(“a”); // 创建a标签
link.href = url;
link.download = “模板下载”; // 重命名文件
link.click();
URL.revokeObjectURL(url); // 释放内存
this.checkList = [];
})
.catch((error) => {
console.log(error.data);
});
},

[获取到了后台传过来的excel文件 前端用vue怎么接收并导出？ - 中文 - Vue Forum](https://bbs.csdn.net/topics/618166371)


[vue.js前端实现excel表格导出和获取headers里的信息 - 五个半柠檬 - OSCHINA - 中文开源技术交流社区](https://bbs.csdn.net/topics/618166371)


java后台需要设置



### 基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

##### 网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/b7cad9624efe25bd5824132083f7ac04.webp?x-oss-process=image/format,png)


CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

![](https://img-blog.csdnimg.cn/img_convert/b937f5b3feb7be74c958dbaf07e63680.webp?x-oss-process=image/format,png)


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

![](https://img-blog.csdnimg.cn/img_convert/3cb2c64835998bccccc8a8086a363e7e.webp?x-oss-process=image/format,png)

。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中...(img-sPPHj5y2-1715158750481)]