工作总结系列---【vue页面实现导出表格效果】

工作情景：在工作中，页面有一个导出表格按钮，点击就会出现表格，作为工作小白，第一次遇到这个问题不知道如何把表格从底部弹出，不过最后实现效果了

实现步骤:

1.封装请求：
ecport function exportTableApi(paramsdata){
 return Request({
 url:'url',
 method:"get",
 params:{...paramsdata},
 responseType:"blob"
 })
}

<template>
  <div><button @click="exporttable">导出表格</button></div>
</template>

<script>
export default {
  data() {
    return {
      paramsObj: "",
      yearTitle: "",
      monthTitle: "",
    };
  },

  created() {
      //格式化参数
    console.log(getToday(), "=======今天的日期========");
    if (this.$route.query.manageorgId || this.$route.query.date) {
      this.$route.query.manageorgId.indexOf("%") > -1? (this.paramsObj.manageorgId = "%"): (this.paramsObj.manageorgId = this.$route.query.manageorgId);
      this.paramsObj.date = this.$route.query.date;
    } else {
      this.paramsObj.manageorgId = JSON.parse(getLocal("userinfo")).manageorgId;
      this.paramsObj.date = getToday();
    }

    this.formatDay(this.paramsObj.date);
  },

 methods:{
    //  1.处理日期，需要转换成2020-10-21格式
    formatDay(date){
        let tempDate=date.split("-")
        let year=tempDate[0]
        let month=tempDate[1]
        let date=tempDate[2]
        //将小于10的数字0去掉
        parseInt(month)<10?(month=month.substr(1))：month;
        parseInt(day)<10?(day=day.substr(1))：day;
        this.monthTitle=`${month}月累计`
		this.yearTitle=`${year}月累计`
    },

    // 2.点击发送请求：
   getExportTable(params){
    exportTableApi(params).then((res)=>{
    let blob=new Blob([res],{
    type:"application/vnd.ms-excel;charset=utf-8"
    });
    const fileName="案件占比.xls";
    let downloadElement=document.createElement("a");
    let href=window.URL.createObjectURL(blob);//创建下载的链接
    downloadElement.href=href;
    downloadElement.download=fileName;//下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click();//点击下载
    document.body.removedChild(downloadElement);//下载完成移除元素
    window.URL.revokeObjectURL(href) //释放blob
    })
    .catch(err=>{
    console.log("下载失败，err")
    })
	
   },
    // 3.点击发送请求
   exporttable(){
       this.getExportTable()
   }
}
};
</script>

<style>
</style>