50.《vue中Element-ui批量导出》

首先在页面上准备好表格：

<template>
<div>
   <el-table :data="tableData" style="width: 100%" @row-click="tz" id="out-table">
            <el-table-column prop="activeCode" label="激活码" width="180"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="activeUser" label="激活用户"></el-table-column>
            <el-table-column prop="department" label="部门"></el-table-column>
            <el-table-column prop="createTime" label="激活时间"></el-table-column> 
            <el-table-column label="操作"> 
              <a href="javascript:;" @click="delRoot">移除</a>
            </el-table-column>
          </el-table>
<button class="btn"   @click="exportExcelBtn">批量导出</button>
</div>
</template>


<script> 
import { exportExcelFn } from '../../assets/js/commonUtil.js';
export default {
  data() {
    return {
      activeName: "second",
      _uid: 32,
      tableData: [
        {
          activeCode: "2020-0909 0003",
          activeUser: "张伟",
          department: "舆情科",
          createTime: "2020-10.25",
          updataTime: "2020-10.30"
        },
        {
          activeCode: "2020-0909 0003",
          activeUser: "张伟",
          department: "舆情科",
          createTime: "2020-10.25",
          updataTime: "2020-10.30"
        },
        {
          activeCode: "2020-0909 0003",
          activeUser: "张伟",
          department: "舆情科",
          createTime: "2020-10.25",
          updataTime: "2020-10.30"
        },
        {
          activeCode: "2020-0909 0003",
          activeUser: "张伟",
          department: "舆情科",
          createTime: "2020-10.25",
          updataTime: "2020-10.30"
        },
        {
          activeCode: "2020-0909 0003",
          activeUser: "张伟",
          department: "舆情科",
          createTime: "2020-10.25",
          updataTime: "2020-10.30"
        },
        {
          activeCode: "2020-0909 0003",
          activeUser: "张伟",
          department: "舆情科",
          createTime: "2020-10.25",
          updataTime: "2020-10.30"
        },
        {
          activeCode: "2020-0909 0003",
          activeUser: "张伟",
          department: "舆情科",
          createTime: "2020-10.25",
          updataTime: "2020-10.30"
        }
      ]
    };
  },
  methods: {
 //定义导出Excel表格事件
    exportExcelBtn() {
      exportExcelFn('table数据', '#out-table');
    },
  }
}

 其次，新建一个commonUtil.js文件； Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)

npm install --save xlsx file-saver

commonUtil.js：

// 引入导出Excel表格依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
// excelName:导出excel的名字,  elementName:被导出的元素名
export function exportExcelFn(excelName,elementName) {
  /* 从表生成工作簿对象 */
  var wb = XLSX.utils.table_to_book(document.querySelector(`${elementName}`));
  /* 获取二进制字符串作为输出 */
  var wbOut = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array',
  });
  try {
    FileSaver.saveAs(
      //Blob 对象表示一个不可变、原始数据的类文件对象。
      //Blob 表示的不一定是JavaScript原生格式的数据。
      //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
      //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
      new Blob([wbOut], { type: 'application/octet-stream' }),
      //设置导出文件名称
      `${excelName}.xlsx`
    );
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbOut);
  }
  return wbOut;
}

大功告成 单击 按钮就可以导出