前端导出/前端实现导出功能 && 调用接口导出

1.前端导出，不需要调用后台接口后台导出，前端直接实现导出功能

导出table数据

js 引入

  import FileSaver from "file-saver";

  import XLSX from "xlsx";

 

table id  out-table

<el-table
      v-loading="dataLoading"
      ref="multipleTable"
      id="out-table"
      :data="tableData3"
      border
      tooltip-effect="dark"
    >
      <el-table-column label="序号" width="50">
        <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>
      <el-table-column width="200" prop="company" label="所属区域公司">
          <template slot-scope="scope">{{scope.row.company.companyName}}</template>
      </el-table-column>
      <el-table-column width="200" prop="storeName" label="门店名称"></el-table-column>
      <el-table-column width="200" prop="storeSn" label="门店编码"></el-table-column>
       <el-table-column width="200" prop="amount" label="门店佣金余额（￥）">
        <template slot-scope="scope">{{scope.row.amount | formatMoney}}</template>
      </el-table-column>
      <el-table-column width="200" prop="status" label="门店状态">
         <template slot-scope="scope">
            <span v-if="scope.row.status=='1'">合作中</span>
            <span v-if="scope.row.status=='9'">停业</span>
         </template>
      </el-table-column>
       <el-table-column width="200" prop="createTime" label="创建时间"></el-table-column>
      <!-- <el-table-column  width="200" prop="licenseImg[0].imgUrl" label="营业执照照片">
        <template slot-scope="scope">
          <el-popover placement="left" trigger="hover">
            <img :src="scope.row.licenseImg[0].imgUrl" width="700" v-if="scope.row.licenseImg"/>
            <img slot="reference" :src="scope.row.licenseImg[0].imgUrl" width="40" height="40"  v-if="scope.row.licenseImg"/>
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="wareEdit(scope.$index, scope.row)"
          >查看佣金明细</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="setRate(scope.$index, scope.row)"
          >佣金发放</el-button>
        </template>
      </el-table-column>
    </el-table>

 js代码  table 的id 需要为 out-table

 

  /**
       * 点击-导出
       */
      exportExcel() {
        this.loading=true;
        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),{raw:true});
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "门店佣金流水-数据导出.xlsx"
          );
           this.loading=false;
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
            this.loading=false;
        }
        return wbout;
      },

　　

二  后台导出

 download() {
      let obj = {}
      api.downloadTask(obj).then(res => {
        const content = res
        const blob = new Blob([content])
        const fileName = '任务管理数据概览-数据导出.xlsx'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },

//数据概览导出
export function downloadTask(obj) {
  return request({
    url: '/admin/download/store/task',
    method: 'post',
    data: obj,
    responseType: 'arraybuffer'
  })
}