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

工具：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