vue2的导出exal

<template>
  <el-dialog :visible.sync="visibleDelivery" append-to-body title="附件(对账单明细表)" width="950px">
    <div  id="out-daying1" ref="print" style="overflow: auto;" v-loading="loading">

      <YgstCanteenStatementObjInfo :detailObjData="detailObjData"></YgstCanteenStatementObjInfo>

      <div class="row-title">
        <div>对账单明细 </div>
        <div class="check-right">
          <el-checkbox v-model="checked" @change="showDetails ">显示账单明细</el-checkbox>
        </div>
      </div>
      
      <table class="table-box" style="width:100%; line-height: 2.8em;" cellpadding="0" cellspacing="0">
        <tr class="conname">
          <th align="center">验收单号</th>
          <th align="center">验收日期</th>
          <th align="center">验收品种数</th>
          <th align="center">核磅人</th>
          <th align="center">核磅总金额</th>
        </tr>
        <tbody class="conbody" v-for="(item,index) in deliveryTable" :key="index">
          
          <tr  style="background-color:#DDDDDD;text-align:center">
            <td style="width:40%" align="center"> <div>{{ item.id }}</div> </td>
            <td style="width:20%" align="center"> <div>{{ item.poundTime }}</div> </td>
            <td style="width:20%" align="center"> <div>{{ item.poundCount }}</div> </td>
            <td style="width:10%" align="center"> <div>{{ item.poundUser }}</div> </td>
            <td style="width:10%" align="center"> <div>{{ item.poundPrice }}元</div> </td>
          </tr>
          <!-- 嵌套开始 -->
          <tr class="child-row123 child-head-background" v-show="checked" style="text-align:center" >
            <th>品种名称(品牌/指标说明/保质期)</th>
            <th>品种数量(单位)</th>
            <th>核磅单价</th>
            <th style="text-align:right;">核磅金额</th>
          </tr>
          <tr
            v-show="checked"
            class="child-row123 child-background"
            v-for="(every,index) in item.deliveryDetailsList"
            :key="index"
            style="text-align:center"   
          >
            <td style="width:260px">
              <span style="color:orange;">[{{every.salesItemName}}]</span>
              {{every.salesSubItemName}}({{every.brandName}}/{{every.indicatorDescription}}/
              <span
                v-show="every.shelfLifeUnit != 0"
              >{{every.shelfLife}}</span>
              <span v-if="every.shelfLifeUnit==1">年</span>
              <span v-if="every.shelfLifeUnit==2">个月</span>
              <span v-if="every.shelfLifeUnit==3">天</span>
              )
            </td>
            <td>{{every.shipNumber}}{{every.itemUnit}}</td>
            <td>{{every.poundUnitPrice}}元/{{every.itemUnit}}</td>
            <td style="text-align:right;">{{every.poundTotalPrice}}元</td>
          </tr>
         
          <!-- 嵌套结束 -->
        </tbody>
        <tr class="contail"  style="background-color:#DDDDDD;">
          <td style="width:40%" align="center" >合计</td>
          <td style="width:20%" align="center"></td>
          <td style="width:20%" align="center"></td>
          <td style="width:10%" align="center"></td>
          <td style="width:10%" align="center">{{ totalAllPrice }}元</td>
        </tr>
      </table>

      <YgstCanteenStatementSign/>
      
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visibleDelivery = false">关闭</el-button>
      <el-button type="warning" @click="exportFun">导出</el-button>
      <el-button type="success" @click="onPrint">打印</el-button>
    </span>
  </el-dialog>
</template>

<script>
import ExcelJS from "exceljs";
import XLSX from 'xlsx';
import FileSaver from 'file-saver'
import YgstCanteenStatementApi from "@/service/ygst-api/ygst-canteen-statement-api";
import YgstCanteenStatementSign from "./YgstCanteenStatementSign.vue";
import YgstCanteenStatementObjInfo from "./YgstCanteenStatementObjInfo.vue";

export default {
  components: {
    YgstCanteenStatementSign,
    YgstCanteenStatementObjInfo
  },
  name: "YgstCanteenStatementDeliveryDetailsDialog",
  data() {
    return {
      visibleDelivery: false,
      detailObjData: {},
      deliveryTable:[],
      totalAllPrice:"",
      chinesePrice:"",
      checked:false,
      loading:true
    }
  },

  mounted() {
    
  },
  // Delivery
  methods: {
    showDetails(){
      console.log(this.checked)
    },
    openDeliveryDetail(rowData) {
      this.visibleDelivery = true;
      this.detailObjData = rowData;
      this.getDeliveryData(rowData)
    },
    getDeliveryData(rowData){
      YgstCanteenStatementApi.DeliveryList(rowData.id).then(value => {
        console.log(value)
        
        this.deliveryTable = value;
        
        var sum = 0;
        this.deliveryTable.forEach(function (value) {
          sum += value.poundPrice;
        });
        this.totalAllPrice = sum;
      })
      .finally(() => {
        this.loading = false;
      })
    },
    exportFun(){
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      // /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-daying1'),xlsxParam)
      /* get binary string as output */
      var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
      try {
        FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), this.detailObjData.canteenName + '“阳光食堂”食材采购结算附件（对账单明细）' + (new Date()).getTime() + '.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },

    onPrint() {
      this.$print(this.$refs.print);
   
    },
  }

}
</script>

<style scoped>


.row-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 30px 0px;
}

.check-right {
  cursor: pointer;
  margin-left: 160px;
  
}


 .child-row123 th {

  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}
.table-box td{
  border-bottom: 1px solid #ebeef5;
}




</style>