vue element-ui表格（el-table）数据导出execl文件

---

前言

功能实现：element UI 的el-table数据导出为execl文件
使用到插件：xlsx、file-saver

---

一、插件安装

npm install --save xlsx file-saver

二、使用示例

1.创建导出execl工具文件

exportExecl.js 代码如下：

import FileSaver from 'file-saver'
const XLSX = require('xlsx')

/**
 * el-table数据导出execl文件
 * 
 * @param {*} id:el-table元素id
 * @param {*} fileName :导出文件名称
 * @returns 
 */
function exportExecl(id,fileName){
    
    
    let excelName = fileName||'导出表格.xlsx';
      var xlsxParam = {
    
     raw: true };
      let tables=document.getElementById(id);
       if(!tables) return
        tables = document.getElementById(id).cloneNode(true);
      // 移除固定列，防止重复生成表格 
      if (tables.querySelector('.el-table__fixed') !== null) {
    
    
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }
      let table_book = XLSX.utils.table_to_book(tables,xlsxParam);
      var table_write = XLSX.write(table_book, {
    
    
          bookType: "xlsx",
          bookSST: true,
          type: "array"
      });
      try {
    
    
          FileSaver.saveAs(
              new Blob([table_write], {
    
     type: "application/octet-stream" }),
              excelName
          );
      } catch (e) {
    
    
             console.log(e, table_write);
      }
      return table_write;

}
export default exportExecl

2.页面引用

页面代码如下：

<el-table id="table"></el-table>
<el-button @click="handleExport">导出</el-button>

 import exportExecl from "@/utils/exportExecl.js";
 export default {
    
    
    methods:{
    
    
    //导出
      handleExport(){
    
    
           exportExecl("table", "模板.xlsx");
      }
    }
 }