vue前端实现批量导出

在vue的vue复选框的表格中，在表格内有两个方法select和selectAll方法select方法有两个参数，第一个参数是一个数组，内容为你所有选中的对象，选中几个在这个数组中就有几个对象，第二个参数为你选中的当前对象，把第一个参数拿到，直接渲染到xlsx方法绑定的table表格中，然后将这个表格导出就好

selectAll方法有一个参数，就是选中的所有对象，选中所有后，拿到这个数组，渲染表格导出

首先需要下载

cnpm install --save xlsx file-saver//该插件用来实现本地导出xlsx，excel等表格

然后引进插件

import FileSaver from "file-saver";
import XLSX from "xlsx";

template中的代码

<el-table
    :data="stu_list"
    border
    -----------------------------------
          @select='xz'
          @select-all='xzAll'
//调用这两个方法，拿到数据
          ---------------------------------
    style="width: 100%">

<el-table-column 
      type="selection"
      width="55">
    </el-table-column>

    <el-table-column
      fixed
      prop="nickname"
      label="学生名称"
      width="300">
      <template slot-scope="scope">
          <img :src="scope.row.avatar" alt="" class="img">
          {{scope.row.nickname}}
      </template>
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="手机号"
      width="200">
    </el-table-column>
    <el-table-column
      label="状态"
      width="200">
      <template slot-scope="scope">
          <span v-if="scope.row.status==0">禁用</span>
          <span v-else>启用</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="created_at"
      label="创建时间"
      width="120">
    </el-table-column>
  
    <el-table-column
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.uid)" type="text" size="small">详情</el-button>
        <el-button type="text" size="small" @click="up(scope.row.uid)">编辑</el-button>
        <el-button type="text" size="small" v-show="scope.row.status==1" @click="Disable(scope.row.uid)">禁用</el-button>
        <el-button type="text" size="small" v-show="scope.row.status==0" @click="upDisable1(scope.row.uid)">启用</el-button>
        <el-button type="text" size="small" @click="remove(scope.row.uid)">删除</el-button>
        <el-button type="text" size="small" @click="resPass(scope.row.uid)">重置密码</el-button>
      </template>
    </el-table-column>
  </el-table>

methods中的代码

    xz(x,y){
      console.log(x,y);
      this.aa=x
    },
    xzAll(x){
      console.log(x);
      this.aa=x
    },
        //讲方法赋值到aa数组里面

template中的代码

//批量导出调用导出方法
 <el-button type="primary" size="small" @click="exportexcel" >批量导出</el-button>

//在这里将拿到的aa渲染到该表格
 <table class="table" v-show="false">
  <tr style="width:200px;">
    <td>序号</td>
    <td>姓名</td>
    <td>电话号码</td>
  </tr>
  <!-- 动态渲染 -->
  <tr style="text-align:center;" v-for="(item,index) in aa" :key="index">
    <td style="width:200px;text-align:center;">{{index+1}}</td>
    <td style="width:200px;text-align:center;">{{item.nickname}}</td>
    <td style="width:200px;text-align:center;">{{item.mobile}}</td>
  </tr>
</table>

methods中的代码

//方法
exportexcel() {

    // 定义xlsx文件的名字

    let name = '学生信息收集表'
      //console.log(name)
      //选择要导出的表格
      var wb = XLSX.utils.table_to_book(document.querySelector(".table"));

      var wbout = XLSX.write(wb, { //excel配置
        // 文件类型
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      wbout.style='text-align:center'
      console.log(wbout)
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        // 将原生字符串转换为Uint8Array的数组，然后再通过FileSaver保存到文件
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          name + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;

    
    },

批量导出完整代码

<template>
  <div class="StudentManagement">
    <!-- 头部面包导航 -->
    <div class="top">
      <router-link to="StudentManagement"><b>学员管理</b></router-link>
    </div>
    <!-- 头部搜索 -->
    <div class="seek">
      <div class="seek_state">
        <span>学员状态</span>
        <el-select
          v-model="student_status"
          clearable
          placeholder="请选择"
          style="width:250px;"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="seek_name">
        <span>学生名称</span>
        <el-input
          placeholder="请输入内容"
          v-model="student_name"
          clearable
          style="width:250px;"
        >
        </el-input>
      </div>
      <div class="seek_mobile">
        <span>手机号</span>
        <el-input
          placeholder="请输入内容"
          v-model="student_mobile"
          clearable
          style="width:250px;"
        >
        </el-input>
      </div>
      <div class="seek_btn">
        <el-button plain icon="el-icon-search" @click="onSearch"
          >搜索</el-button
        >
        <el-button plain icon="el-icon-refresh" @click="Reset">重置</el-button>
      </div>
    </div>
    <!-- 按钮--新增学员、批量导入、批量导出、查看报表 -->
    <div class="btn" style="margin:15px 10px ">
      <el-button type="primary">
        <router-link to="addStudent" style="color:#fff">新增学员</router-link>
      </el-button>
      <el-button type="primary">
        <router-link to="BatchImport" style="color:#fff">批量导入</router-link>
      </el-button>
      <el-button type="primary" @click="exportexcel">批量导出</el-button>
      <el-button type="primary">查看报表</el-button>
    </div>
    <!-- 学生信息表 -->
    <div class="student_information_sheet">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column label="学生名称">
          <template slot-scope="scope">
            <div class="ss" style=" display: flex;align-items: center;">
              <el-avatar
                :size="30"
                :src="scope.row.avatar"
                style="margin-right:5px"
              ></el-avatar>
              {{ scope.row.nickname }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号"> </el-table-column>
        <el-table-column prop="" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1">
              启用
            </div>
            <div v-else>禁用</div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="cz">
              <span @click="gotoDetails(scope.row)">详情</span
              >-<span>编辑</span>-<span>禁用</span>-<span>删除</span>-<span
                >重置密码</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[1, 3, 5, 7, 9]"
        :page-size="pagesize"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 用来导出的表格 -->
    <table class="table" v-show="false">
      <tr style="width:200px;">
        <td>序号</td>
        <td>姓名</td>
        <td>电话号码</td>
      </tr>
      <!-- 动态渲染 -->
      <tr
        style="text-align:center;"
        v-for="(item, index) in multipleSelection"
        :key="index"
      >
        <td style="width:200px;text-align:center;">{{ index + 1 }}</td>
        <td style="width:200px;text-align:center;">{{ item.nickname }}</td>
        <td style="width:200px;text-align:center;">{{ item.mobile }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  components: {},
  name: "",
  data() {
    return {
      //学生所有数据
      tableData: [],
      //   被选中的学生数组
      multipleSelection: [],
      //   学员状态
      options: [
        {
          value: "选项1",
          label: "启用",
        },
        {
          value: "选项2",
          label: "禁用",
        },
      ],
      student_status: "", //选中的学生状态
      student_name: "", //学生名字
      student_mobile: "", //学生手机号
      pagenum: 1, //一页多少条
      pagesize: 5, //第几页
      total: 0, //总共多少条
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    async getlist() {
      const { data: res } = await this.$http(
        `user?page=${this.pagenum}&limit=${this.pagesize}&status=${this.student_status}&nickname=${this.student_name}&mobile=${this.student_mobile}&`,
        "get",
        {}
      );
      // console.log(res);
      if (res.code !== 200) {
        this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },

    handleSizeChange(val) {
      this.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getlist();
    },
    // 搜索
    onSearch() {
      this.getlist();
    },
    // 重置
    Reset() {
      this.student_status = "";
      this.student_name = "";
      this.student_mobile = "";
    },
    // 批量导出
    exportexcel() {
      // 定义xlsx文件的名字

      let name = "学生信息收集表";
      //console.log(name)
      //选择要导出的表格
      var wb = XLSX.utils.table_to_book(document.querySelector(".table"));

      var wbout = XLSX.write(wb, {
        //excel配置
        // 文件类型
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      wbout.style = "text-align:center";
      console.log(wbout);
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        // 将原生字符串转换为Uint8Array的数组，然后再通过FileSaver保存到文件
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          name + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //跳转详情
    gotoDetails(obj) {
      console.log(obj);
      this.$router.push({ path: "/studentDetails", query: { obj: obj } });
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.StudentManagement {
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    height: 35px;
    border-bottom: 1px solid #cccccc;
    display: flex;
    align-items: center;

    a {
      margin-left: 10px;
      color: #515a6e;
    }
    a:hover {
      color: #63a9f4;
    }
  }

  .seek {
    width: 100%;
    display: flex;
    font-size: 14px;
    flex-wrap: wrap;

    div {
      width: 25%;
      display: flex;
      align-items: center;

      span {
        margin: 0 10px 0 15px;
      }
    }
  }
  .student_information_sheet {
    width: 100%;

    .cz {
      color: #2d8cf0;
      span {
        font-size: 12px;
        color: #2d8cf0;
        cursor: pointer;
      }
    }
  }
}
</style>

​