前端vue批量下载excel的2种方法，2种方法均适合get和post两种请求

第一种方法我采用的是创建a标签，但是这种方法有个弊端就是从后台获取的数据，下载的名字是固定写死的。

第二种：使用iframe标签，通过在utils中把参数和token拼接起来，也可以下载。以上2种方法均适合get和post两种请求。

注意：我从后台获取的数据是文件流，没有返回data形式的数据，我就设置了一下请求返回值为blob形式的。

<template>
  <div>
    <el-button type="success" style="margin-bottom:20px"  @click="getExcel()">批量处理操作</el-button>
  </div>
</template>

<script>
import { implementationExcelExport } from "@/services/index";
//这个是把参数和token拼接在一起，传递过来的
import { exportExcel } from "@/utils";
  export default {
    data(){
      return {
      }
    },
    methods:{
      //获取批量处理
      // 第一种方法，是创建a标签，通过a链接进行下载，但是有一个缺点就是，下载的名称是固定的
      // getExcel(){       
      //   const param = {
      //     //这个id是获取的父组件的table表格id
      //     id: this.$parent.currId.id
      //   }
      //   implementationExcelExport(param,{responseType:"blob"}).then(res=>{
      //     let blob = res;
      //     let a = document.createElement("a");
      //     let url = URL.createObjectURL(blob);
      //     a.href = url;
      //     a.download = "文档.xl";
      //     a.click();
      //     URL.revokeObjectURL(a.href)
      //   })
      // }
      //第二种方法是iframe标签
      async getExcel(){    
        const downzipurl = exportExcel(this.$parent.currId.id);
      this.$$message({
        message:"数据已生成！",
        type:"success"
      });
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.style.height =0;
      iframe.src = downzipurl;
      document.body.appendChild(iframe);
      //设置一个定时器 5分钟清除iframe标签
      setTimeout(()=>{
        iframe.remove();
      },5*60*1000)
      }
    }
}
</script>

<style lang="less" scoped>
</style>

效果图如下：