解决前端项目问题，基于vue的后端接口excel文件的导出_意初_vue 后端导出excel

网络投稿 02-07 779

工具：vue2.0+element-ui+vscode

与后端响应成功返回的文件流，

excel导出功能效果如下，

可以下载excel文件

打开下载的excel模板?

①首先在结构层里进行布局，

创建一个点击事件@click="daochu"

<li @click="daochu"><i class="el-icon-bottom"></i>导出</li> ?②其次在行为层里利用axios进行后端数据交互

daochu事件建立一个函数封装，将局部变量进行二次封装，然后进行axios交互

daochu() { // let c= Object.assign([], this.Add.c); // c= c.splice(c.length - 1, c.length); let handleSSDW = ""; if (this.Add.c.length > 0) { handleSSDW = this.Add.c.flat(Infinity).toString(); } let zt = ""; if (this.Add.zt) { zt = this.Add.zt; } else { if (this.activeName == "first") { zt = "0"; } else { zt = "1,2"; } } let d = this.Add.d; d = Object.assign([], d); // if (d.length >= 2) { // d = gzlx.splice(1, 1); // } else { // d = ""; // } // 导出 this.$confirm("此操作将导出excel文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { axios({ method: "post", url: window.serverAPI.url + "/xxx/xx/xx/xx/xx", //api接口文档 data: { zt: zt, // gzlx:this.Add.gzlx[1], a: this.Add.a, b: this.Add.b, c: c.toString(), d: this.Add.d, e: handleSSDW }, responseType: "blob", headers: { "Content-Type": "application/json", //设置请求头请求格式为JSON Authorization: window.sessionStorage.getItem("token"), }, }).then((data) => { let url = window.URL.createObjectURL(data.data); //表示一个指定的file对象或Blob对象 let a = document.createElement("a"); document.body.appendChild(a); // let fileName=data.headers["content-disposition"].split(";")[1].split("=")[1]; //filename名称截取 // fileName = decodeURI(fileName); a.href = url; a.download = "报备审核"; //命名下载名称 a.click(); //点击触发下载 window.URL.revokeObjectURL(url); //下载完成进行释放 }); }) .catch(() => { this.$message({ message: "已取消导出", type: "info", }); }); } ③最后别忘了数据层里要进行数据传输，

这里是对后端传来的数据进行接收，命名一定要与后端的数据保持一致

Add: { zt: 0, a: "", b: "", c: "", d: "", e: "" }

end，附上作者的上一篇文章?

解决前端项目问题：elementui+vue，如何实现选择器的数据交互，进行页面渲染的两种方式，简单易懂。（后端和本地）_意初的博客-CSDN博客①通过本地内置的静态数据，进行对lement-ui的选择器（el-select组件和el-option组件）页面渲染②通过后端传来的数据（活数据），接收后对element-ui的选择器（el-select组件和el-option组件）进行页面渲染【结构层】如下，v-model="value"：v-model是双向绑定，绑定了数据层里的valuev-for="item in options" ：用item空数组遍历数据层里的options数组，之后取数据就用item.xxx取:key="item.valhttps://blog.csdn.net/weixin_43928112/article/details/125174935?spm=1001.2014.3001.5501