Vue+Element-UI表格导出Excel案例

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

<template>
    <div class="table">
        <!--给表格添加一个id，导出文件事件需要使用-->
        <el-table :data="tableData1" border style="width: 54.45%" id="out-table">
           <el-table-column prop="date" label="日期" width="180"></el-table-column>
           <el-table-column prop="name" label="姓名" width="180"></el-table-column>
           <el-table-column prop="address" label="地址" width="280"></el-table-column>
         </el-table>
         <button @click="exportExcelBtn">点击导出</button>
    </div>
</template>
<script>
import { exportExcelFn } from '../assets/js/commonUtil';
export default {
　　data(){
　　　　return {　　　　　
　　　　　　tableData1: [
        　　{
          　　date: '2016-05-02',
          　　name: '王小虎',
          　　address: '上海市普陀区金沙江路 1518 弄',
        　　},
        　　{
         　　 date: '2016-05-04',
          　　name: '王小虎',
          　　address: '上海市普陀区金沙江路 1517 弄',
        　　},
        　　{
          　　date: '2016-05-01',
          　　name: '王小虎',
          　　address: '上海市普陀区金沙江路 1519 弄',
        　　},
        　　{
          　　date: '2016-05-03',
          　　name: '王小虎',
          　　address: '上海市普陀区金沙江路 1516 弄',
        　　},
      　　],
　　　　}
　　},
  methods: {
　　//定义导出Excel表格事件
    exportExcelBtn() {
      exportExcelFn('猪猪', '#out-table');
    },
　}
}
</script>
<style lang="less">
　　
</style>

 其次，新建一个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;
}

 大功告成~~！！！，喜欢请关注一下(づ￣3￣)づ╭❤～