vue实现导出表格数据

先看实现效果

1.安装依赖

cnpm install -S file-saver xlsx
cnpm install -S script-loader

2.在需要的组件引入

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

3.使用

注意

导出的表格可以直接复制上面的表格，但是有三个地方需要改动
1.要隐藏导出的表格;
2.一定要给导出的表格一个id;
3.给导出的表格数据绑定一个新的数组。

小案例

<template>
  <div>
    <!-- //导出按钮 -->
    <div>
      <el-button type="success" icon="el-icon-upload" @click="Export">导出</el-button>
    </div>
    <!-- // 表格数据-->
    <div class="tableList">
      <el-table :data="tableData" border>
        <el-table-column prop="jcrq" label="检查时间" align="center"></el-table-column>
        <el-table-column prop="zfry" label="执法人员" align="center"></el-table-column>
        <el-table-column prop="jcjg" label="检测结果" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.jcjg == '0'">合格</span>
            <span v-if="scope.row.jcjg == '1'">不合格</span>
          </template>
        </el-table-column>
        <el-table-column prop="rllx" label="是否处罚" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.sfcf == '0'">处罚</span>
            <span v-if="scope.row.sfcf == '1'">不处罚</span>
          </template>
        </el-table-column>
        <el-table-column prop="operation" align="center" label="操作" width="">
          <template slot-scope="scope">
            <el-button type="primary" icon="delete" size="mini" @click="examineOne(scope.row)">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <!--//分页-->
        <div class="pagination">
          <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"></pagination>
        </div>
      </div>
    </div>
    <!-- // 导出表格 -->
    <div style="display: none">
      <el-table id="out-table1" :data="tableExport" border>
        <el-table-column prop="jcrq" label="检查时间" align="center"></el-table-column>
        <el-table-column prop="zfry" label="执法人员" align="center"></el-table-column>
        <el-table-column prop="jcjg" label="检测结果" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.jcjg == '0'">合格</span>
            <span v-if="scope.row.jcjg == '1'">不合格</span>
          </template>
        </el-table-column>
        <el-table-column prop="rllx" label="是否处罚" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.sfcf == '0'">处罚</span>
            <span v-if="scope.row.sfcf == '1'">不处罚</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import XLSX from "xlsx"
  import FileSaver from 'file-saver'
  export default {
    
    
    data() {
    
    
      return {
    
    
        pageNumber: 1, //当前页数
        pageSize: 10, //一页显示几条
        tableData: [], //表格数据
        tableExport: [], //导出表格数据
      }
    },
    // 导出操作
    Export() {
    
    
      let data = {
    
    
        pageNumber: this.pageSize, //当前页数
        pageSize: this.pageNumber, //一页显示几条
      }
      this.pageNumber = 1; //从第几页开始
      this.pageSize = 100000; //设置需要导出的条数
      const para = Object.assign({
    
    }, data); //data就是方法里定义的data
      // search请求接口(还是表格接口)
      search(para).then(res => {
    
    
        this.tableExport = res.data.records; //拿到接口的数据赋值给我们重新定义的表格数组
        this.pageNumber = 1;
        this.pageSize = 10;
        //设置几秒后执行导出操作
        setTimeout(function () {
    
    
          //这个id就是我们导出表格中定义的id
          var wb = XLSX.utils.table_to_book(document.querySelector('#out-table1'))
          var wbout = XLSX.write(wb, {
    
    
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
          })
          try {
    
    
            FileSaver.saveAs(new Blob([wbout], {
    
    
              type: 'application/octet-stream'
            }), '测试.xlsx') //导出的名字
          } catch (e) {
    
    
            if (typeof console !== 'undefined') console.log(e, wbout)
          }
          return wbout
        }, 1000); //一秒后执行导出操作
      });
    },
  }
</script>