前端導出/前端實現導出功能 && 調用接口導出

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'
  })
}