2024年最全Vue 前端导出、下载zip excel文件流blob_vue new blob 大量数据，Web前端中高级面试必知必会

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

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

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

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

java后台需要设置

 response.addHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
 response.setHeader("Access-Control-Expose-Headers","Content-Disposition");

才能获取到文件名等信息


#### Vue 编码基础

2.1.1. 组件规范  

2.1.2. 模板中使用简单的表达式  

2.1.3 指令都使用缩写形式  

2.1.4 标签顺序保持一致  

2.1.5 必须为 v-for 设置键值 key  

2.1.6 v-show 与 v-if 选择  

2.1.7 script 标签内部结构顺序  

2.1.8 Vue Router 规范



#### Vue 项目目录规范

2.2.1 基础  

2.2.2 使用 Vue-cli 脚手架  

2.2.3 目录说明  

2.2.4注释说明  

2.2.5 其他

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

![](https://img-blog.csdnimg.cn/img_convert/b4ee1921321dddc29bf532ba888c89e9.png)