element-ui+vue导出table数据到excel

element-ui+vue导出table数据到excel

1.vue安装并引入依赖

1. 安装vue的excel依赖：
   控制台中输入：npm install --save xlsx file-saver；
2. vue中引入依赖：

// 导入excel依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";

2.vue绑定事件

在table中定义id，并绑定按钮事件

<el-table ref="filterTable" :data="tableData" style="width: 100%" id="tab1">
  <el-table-column prop="vipname" label="会员信息"></el-table-column>
  <el-table-column prop="mobile" label="手机号码"></el-table-column>
  <el-table-column prop="fee" label="消费金额"></el-table-column>
  <el-table-column prop="count" label="订单数量"></el-table-column>
</el-table>

<el-button @click="exportExcel('tab1')">导出</el-button>

3.定义导出方法

// 定义导出表格触发事件
  exportExcel(tabid:string) {
    const wb = XLSX.utils.table_to_book(document.querySelector('#' + tabid), {
      raw: true // 如果表格里有数字、日期这些、需要加上raw: true
    });
    /* 获取二进制字符串作为输出 */
    var wbout = XLSX.write(wb, {
      bookType: 'xlsx',
      bookSST: true,
      type: 'array'
    });
    try {
      FileSaver.saveAs(
        // Blob 对象表示一个不可变、原始数据的类文件对象
        new Blob([wbout], { type: 'application/octet-stream' }),
        // 设置导出文件名称
        "file1.xlsx"
      );
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, wbout);
    }
    return wbout;
  }

参考链接：element ui 表格 el-table 导出 - 郭糊了的文章 - 知乎
https://zhuanlan.zhihu.com/p/534784693