调用后台接口导出Excel文件

vue2+elementui调用后台接口导出excel文件功能
在项目中,新增个 Excel导出功能,沟通后,后端小姐姐说,直接调接口就行,,因为有查询条件,所以需要把查询条件也传给后台,以下是代码:

    exportExcel() {
      let searchDatas = JSON.parse(JSON.stringify(this.searchOption)); // 查询就是表格上面的查询条件
      // 这个是多选的状态,处理成后台要的格式
      if(searchDatas.allStatus) {
        searchDatas.allStatus= searchDatas.allStatus.join(',')
      }
      const reqConfig = {
        url: '后台接口',
        method: "post",
        data: {
          ...searchDatas
        },
        responseType: "blob",
      };
      this.$request(reqConfig)
        .then((res) => {
          let url = window.URL.createObjectURL(
            new Blob([res], {
              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
            })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          let excelName = "导出信息.xlsx"; // 此处修改自己想要的导出后的文件名
          link.setAttribute("download", excelName);
          document.body.appendChild(link);
          link.click();
          link.remove();
          window.URL.revokeObjectURL(url);
        })
        .catch((e) => {
          console.log(e);
        });
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值