vue 导出el-table选择的数据使用笔记

1、安装

cnpm i vue-json-excel --save

2、使用

1、引入

import JsonExcel from 'vue-json-excel'

2、注册

components: {
      downloadExcel:JsonExcel,
    },

3、页面使用

data：{
  return {
        excelName:`每日火化量统计${new Date().valueOf()}.xls`,
        json_fields:{
          "类型":'类型',
          "合计":'合计',
        },
   }
}

<el-form-item>
            <download-excel
                class = "export-excel-wrapper"
                v-if="multipleSelection.length > 0"
                :data="multipleSelection"
                :fields="json_fields"
                :name ='excelName'>
                <el-button type="primary" >导出Excel</el-button>
              </download-excel>
               <el-button v-else type="primary"   @click="openExecl">导出Excel
            </el-button>
          </el-form-item>

3、页面代码

<template>
  <div class="dailyCremationVolume  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" label-width="80px" class="PageItem PageItems margintop20">
        <el-row :gutter="5" ref="fileSearch" class="fileSearch">
          <el-form-item label="结算日期:">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.staTime"
                            format="yyyy-MM-dd" ></el-date-picker>
            -
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.endTime"
                            format="yyyy-MM-dd" ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  @click="onSubmit('search')">查询</el-button>
          </el-form-item>
          <el-form-item>
            <download-excel
                class = "export-excel-wrapper"
                v-if="multipleSelection.length > 0"
                :data="multipleSelection"
                :fields="json_fields"
                :name ='excelName'>
                <el-button type="primary" >导出Excel</el-button>
              </download-excel>
               <el-button v-else type="primary"   @click="openExecl">导出Excel
            </el-button>
          </el-form-item>
        </el-row>
        <el-table
          ref="filetable"
          id="res_table"
          :data="tableData"
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight"
           @selection-change="handleSelectionChange"
          border>
           <el-table-column
            type="selection"
            v-if="tableData.length > 0"
            width="55">
          </el-table-column>
          <el-table-column
            :prop="item"
            align='center'
            :label="item"
            :key="item"
            v-for="item in columns"
            >
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as Type from '@/api/service'
  import {dataFormatetmd} from '@/utils/index'
  import FileSaver from "file-saver";
  import XLSX from "xlsx";
  import download from "@/api/download"
  import JsonExcel from 'vue-json-excel'
  export default {
    name: "dailyCremationVolume",
    components: {
      downloadExcel:JsonExcel,
    },
    data() {
      return {
        excelName:`每日火化量统计${new Date().valueOf()}.xls`,
        json_fields:{
          "类型":'类型',
          "合计":'合计',
        },
        loading: false,
        dictionary:{},
         multipleSelection: [],
        tableHeight: 0,
        type: [],
        ruleForm: {
          staTime:new Date(),
          endTime:new Date(),
        },
        pager: {
          pageSize: 20,
          total: 1,
          currentPage: 1
        },
        tableData: [],
        keys:[],
        columns:[]
        //按钮权限


      }
    },
    created () {

    },
    //载入按钮
    mounted() {
      this.$store
      .dispatch("user/getdictionary")
      .then((res) => {
        this.dictionary=res
      })
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (let key of Object.keys(this.btnRight)) {
        this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;
      }
      this.onSubmit()
      var that = this
      window.onresize = function () {
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        that.tableHeight = dom - search - 60
      }
    },
    //注销window.onresize事件
    destroyed() {
      window.onresize = null;
    },
    updated() {
      this.$nextTick(() => {
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        this.tableHeight = dom - search - 80
      })
    },
    methods: {
       handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      async onSubmit() {
        this.loading = true
        this.json_fields={
           "类型":'类型',
          "合计":'合计',
        }
        var postData = {

         staTime:this.ruleForm.staTime?this.$dayjs(new Date(this.ruleForm.staTime)).format('YYYY-MM-DD'):'',
         endTime:this.ruleForm.endTime?this.$dayjs(new Date(this.ruleForm.endTime)).format('YYYY-MM-DD'):'',
        }
        //查询火化档案的接口
        let res = await Type['loadDailyStatisticsData'](postData)
        this.loading=false;
        if(res.code!==1) return this.$message.error(res.message)
        if(res.data){
          this.tableData = res.data.val;
          this.columns = res.data.keys;
          res.data.keys.forEach((item,index)=>{
            console.log(item,'0')
            this.json_fields[item] = res.data.keys[index]
          })
        }else{
          this.tableData=[]
        }

      },
      //加法
      plus(){
        let r1, r2, m
        try{r1 = arguments[0].toString().split(".")[1].length}catch(e){r1 = 0}
        try{r2 = arguments[1].toString().split(".")[1].length}catch(e){r2 = 0}
        m = Math.pow(10,Math.max(r1,r2))
        if(arguments.length > 2) {
          return this.plus((arguments[0] * m + arguments[1] * m) / m, ...(Array.from(arguments).slice(2)))
        }else{
          return ((arguments[0] * m + arguments[1] * m) / m).toFixed(2)
        }
      },
       transformData(data) {
          const keys = Object.keys(data);
          const values = Object.values(data);
          console.log(values,'7411')
          this.keys=values[0].length
          const result = [];

          for (let i = 0; i < values.length; i++) {
            const obj = {};
            obj[0] = keys[i];
            let totalCost = 0;
            for (let j = 0; j < values[i].length; j++) {
              obj[j + 1] = values[i][j];
              totalCost += parseInt(values[i][j]);
            }
            obj[values[i].length + 1] = totalCost;
            result.push(obj);
          }

          return result;
        },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pageSize = size;
        this.onSubmit()
      },
      handleCurrentChange: function (currentPage) {
        this.pager.currentPage = currentPage;
        this.onSubmit()
      },
      openExecl() {
        // var postData = {
        //   itemName:this.ruleForm.itemName,
        //   staTime: dataFormatetmd(new Date(this.ruleForm.staTime)),
        //   endTime: dataFormatetmd(new Date(this.ruleForm.endTime)),
        // }
        // // download.exportExcel("http://localhost:8001/fmis/test/export-excel-file",{title:"title","rowNum":23},"逝者火化档案_"+download.getDateTime()+".xls");
        // download.exportExcel(Type['loadCommodityDataExport'], postData, "小商品日销售统计_" + download.getDateTime() + ".xlsx");
        if(this.multipleSelection.length==0&&this.tableData.length>0){
          let xlsxParam = { raw: true };
            let name ='每日火化量统计'
            let  wb={}

            if(this.tableData.length==0){
                return this.$message('暂无数据可导出')
              }
                wb= XLSX.utils.table_to_book(
              document.querySelector("#res_table"),
                xlsxParam
              );
            /* 从表生成工作簿对象 */

            /* 获取二进制字符串作为输出 */
            var wbout = XLSX.write(wb, {
              bookType: "xlsx",
              bookSST: true,
              type: "array",
            });
            try {
              FileSaver.saveAs(
                //Blob 对象表示一个不可变、原始数据的类文件对象。
                //Blob 表示的不一定是JavaScript原生格式的数据。
                //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                new Blob([wbout], { type: "application/octet-stream" }),
                //设置导出文件名称
                `${name}${(new Date()).valueOf()}.xlsx`
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
        }else {

        }

      },//打开逝者档案
    },


  }
</script>
<style>
  .dailyCremationVolume .PageContent .PageItems .el-input, .dailyCremationVolume .PageContent .PageItems .el-select {

    width: 8vw;
    min-width: 100px;
  }

  /* .dailyCremationVolume .el-dialog__header {
    background-color: cornflowerblue !important;
  } */

  .dailyCremationVolume .el-dialog__title, .dailyCremationVolume .el-dialog__headerbtn .el-dialog__close {
    color: white;
  }

  .dailyCremationVolume .el-dialog {
    min-width: 300px !important;
  }

  .dailyCremationVolume .PageItems .el-input, .dailyCremationVolume .PageItems .el-select {
    width: 8vw;
    min-width: 100px;
  }



  .dailyCremationVolume .detail .el-form-item {
    margin-bottom: 5px;
  }
</style>
<style scoped>
/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
::v-deep .el-table thead.is-group th {
  background: none;
  padding: 0px;
}

::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none; /*中间的横线去掉*/
}

::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
  text-align: right; /*上边文字靠右*/
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
  text-align: left; /*下边文字靠左*/
}
/*核心代码*/
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  /* transform: rotate(-43deg); */
  /* transform: rotate(-70deg); */
  transform: rotate(-50deg);
  -webkit-transform-origin: top;
  transform-origin: top;
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  /* transform: rotate(-45deg); */
  transform: rotate(-50deg);
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
  height: 27.4px;
}
</style>